diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index fa7a75bce57c5930e787ed0cfb6c35724f9ae732..179628f84ab554a78d1a51949fa4948f342f96a4 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -114,7 +114,7 @@ abbr.ajax-changed {
 }
 
 /* Inline error messages. */
-.form-error-message:before {
+.form-item--error-message:before {
   content: '';
   display: inline-block;
   height: 14px;
diff --git a/core/modules/system/src/Tests/Form/FormTest.php b/core/modules/system/src/Tests/Form/FormTest.php
index c5e7fe76a3bc0c8a249e3b1c99f85780212e785f..e556b20599916c35cb8d4cec406e096b7843ea2c 100644
--- a/core/modules/system/src/Tests/Form/FormTest.php
+++ b/core/modules/system/src/Tests/Form/FormTest.php
@@ -188,7 +188,7 @@ function testRequiredCheckboxesRadio() {
     }
 
     // Check the page for error messages.
-    $errors = $this->xpath('//div[contains(@class, "form-error-message")]//strong');
+    $errors = $this->xpath('//div[contains(@class, "form-item--error-message")]//strong');
     foreach ($errors as $error) {
       $expected_key = array_search($error[0], $expected);
       // If the error message is not one of the expected messages, fail.
diff --git a/core/modules/system/src/Tests/Form/ValidationTest.php b/core/modules/system/src/Tests/Form/ValidationTest.php
index 7fd60e7f889173b2d3978dd0eae8c768d67e37c2..31db834ccbf1328844e9c3a072ac628c201ee4e5 100644
--- a/core/modules/system/src/Tests/Form/ValidationTest.php
+++ b/core/modules/system/src/Tests/Form/ValidationTest.php
@@ -276,7 +276,7 @@ function testCustomRequiredError() {
    *   - key: The key used for the form element.
    */
   protected function assertErrorMessages($messages) {
-    $element = $this->xpath('//div[@class = "form-error-message"]/strong');
+    $element = $this->xpath('//div[@class = "form-item--error-message"]/strong');
     $this->assertIdentical(count($messages), count($element));
 
     $error_links = [];
diff --git a/core/modules/system/templates/form-element.html.twig b/core/modules/system/templates/form-element.html.twig
index b1ca6e9ef9b1921bc9655c7f22c276e67c0afbbd..9292fd7e3d3cd1287e099b50447160b177a3f4b0 100644
--- a/core/modules/system/templates/form-element.html.twig
+++ b/core/modules/system/templates/form-element.html.twig
@@ -53,7 +53,7 @@
     'form-item-' ~ name|clean_class,
     title_display not in ['after', 'before'] ? 'form-no-label',
     disabled == 'disabled' ? 'form-disabled',
-    errors ? 'form-error',
+    errors ? 'form-item--error',
   ]
 %}
 {%
@@ -82,7 +82,7 @@
     {{ label }}
   {% endif %}
   {% if errors %}
-    <div class="form-error-message">
+    <div class="form-item--error-message">
       {{ errors }}
     </div>
   {% endif %}
diff --git a/core/themes/bartik/css/components/form.css b/core/themes/bartik/css/components/form.css
index 4574da0cadc98873acd9410aeebf40886a82b5c0..36e82560e456e94a56c10ecde42a209ce98586e9 100644
--- a/core/themes/bartik/css/components/form.css
+++ b/core/themes/bartik/css/components/form.css
@@ -276,6 +276,6 @@ input.form-submit:focus {
 }
 
 /* Form error message styles. */
-.form-error-message {
+.form-item--error-message {
   color: #ea2800;
 }
diff --git a/core/themes/classy/templates/form/datetime-wrapper.html.twig b/core/themes/classy/templates/form/datetime-wrapper.html.twig
index 56da17309d6df1196c913aede453d5dfead38d86..fa04a65c75e2d799e98b85c7df620249b2d488c6 100644
--- a/core/themes/classy/templates/form/datetime-wrapper.html.twig
+++ b/core/themes/classy/templates/form/datetime-wrapper.html.twig
@@ -24,7 +24,7 @@
 {% endif %}
 {{ content }}
 {% if errors %}
-  <div class="form-error-message">
+  <div class="form-item--error-message">
     <strong>{{ errors }}</strong>
   </div>
 {% endif %}
diff --git a/core/themes/classy/templates/form/fieldset.html.twig b/core/themes/classy/templates/form/fieldset.html.twig
index 67b8451bae79790336ad178166b68a63c74a2cfd..5e0d795381e6fd6301d67f1ce8a1030623ef1eab 100644
--- a/core/themes/classy/templates/form/fieldset.html.twig
+++ b/core/themes/classy/templates/form/fieldset.html.twig
@@ -40,7 +40,7 @@
   </legend>
   <div class="fieldset-wrapper">
     {% if errors %}
-      <div class="form-error-message">
+      <div class="form-item--error-message">
         <strong>{{ errors }}</strong>
       </div>
     {% endif %}
diff --git a/core/themes/classy/templates/form/form-element.html.twig b/core/themes/classy/templates/form/form-element.html.twig
index f0d4d5601225dc4ca2914b17e46637c60a153f1d..65028fa3be565b697e4be16740d8a140afc3e751 100644
--- a/core/themes/classy/templates/form/form-element.html.twig
+++ b/core/themes/classy/templates/form/form-element.html.twig
@@ -52,7 +52,7 @@
     'form-item-' ~ name|clean_class,
     title_display not in ['after', 'before'] ? 'form-no-label',
     disabled == 'disabled' ? 'form-disabled',
-    errors ? 'form-error',
+    errors ? 'form-item--error',
   ]
 %}
 {%
@@ -81,7 +81,7 @@
     {{ label }}
   {% endif %}
   {% if errors %}
-    <div class="form-error-message">
+    <div class="form-item--error-message">
       <strong>{{ errors }}</strong>
     </div>
   {% endif %}
diff --git a/core/themes/seven/css/components/form.css b/core/themes/seven/css/components/form.css
index 07232de4f7636c9b38736a7e23e8706957c78d3b..3a717aec876f6e9f9230cc6fd213df9955763116 100644
--- a/core/themes/seven/css/components/form.css
+++ b/core/themes/seven/css/components/form.css
@@ -96,14 +96,14 @@ label[for] {
   width: 7px;
   height: 7px;
 }
-.form-error-message {
+.form-item--error-message {
   margin-top: 0.15em;
   color: #ea2800;
 }
-.fieldset-wrapper > .form-error-message {
+.fieldset-wrapper > .form-item--error-message {
   margin-top: 0;
 }
-.text-format-wrapper .form-error-message {
+.text-format-wrapper .form-item--error-message {
   border: solid #ccc;
   border-width: 0 1px;
   margin: 0;