diff --git a/core/includes/form.inc b/core/includes/form.inc
index 05b6d29d6b89dbd163bf64f20c6b1462f6c4446f..77443ad8b410bb77ef9f81cac1d87c733e52d8e1 100644
--- a/core/includes/form.inc
+++ b/core/includes/form.inc
@@ -4067,7 +4067,7 @@ function form_pre_render_vertical_tabs($element) {
  */
 function theme_vertical_tabs($variables) {
   $element = $variables['element'];
-  return '<div class="vertical-tabs-panes">' . $element['#children'] . '</div>';
+  return '<div data-vertical-tabs-panes>' . $element['#children'] . '</div>';
 }
 
 /**
diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js
index fe95e8eb31d00dddce159e92b6e963b7a6a10064..a02fa2c5d89cc654d287e191857756a6dd47b426 100644
--- a/core/misc/vertical-tabs.js
+++ b/core/misc/vertical-tabs.js
@@ -20,8 +20,8 @@ Drupal.behaviors.verticalTabs = {
       return;
     }
 
-    $(context).find('.vertical-tabs-panes').once('vertical-tabs', function () {
-      var $this = $(this);
+    $(context).find('[data-vertical-tabs-panes]').once('vertical-tabs', function () {
+      var $this = $(this).addClass('vertical-tabs-panes');
       var focusID = $this.find(':hidden.vertical-tabs-active-tab').val();
       var tab_focus;
 
diff --git a/core/modules/system/lib/Drupal/system/Tests/Form/ElementTest.php b/core/modules/system/lib/Drupal/system/Tests/Form/ElementTest.php
index be13136edbc0ee3e10e2db82ab9df39bd6d2c555..c491d0ef99fbf6159f0fb18f1e93f8706a53d0be 100644
--- a/core/modules/system/lib/Drupal/system/Tests/Form/ElementTest.php
+++ b/core/modules/system/lib/Drupal/system/Tests/Form/ElementTest.php
@@ -121,9 +121,9 @@ function testGroupElements() {
     $elements = $this->xpath('//fieldset[@id="edit-fieldset"]//div[@id="edit-meta"]//label');
     $this->assertTrue(count($elements) == 1);
     $this->drupalGet('form-test/group-vertical-tabs');
-    $elements = $this->xpath('//div[@class="vertical-tabs-panes"]//details[@id="edit-meta"]//label');
+    $elements = $this->xpath('//div[@data-vertical-tabs-panes]//details[@id="edit-meta"]//label');
     $this->assertTrue(count($elements) == 1);
-    $elements = $this->xpath('//div[@class="vertical-tabs-panes"]//details[@id="edit-meta-2"]//label');
+    $elements = $this->xpath('//div[@data-vertical-tabs-panes]//details[@id="edit-meta-2"]//label');
     $this->assertTrue(count($elements) == 1);
   }
 
diff --git a/core/modules/system/lib/Drupal/system/Tests/Form/ElementsVerticalTabsTest.php b/core/modules/system/lib/Drupal/system/Tests/Form/ElementsVerticalTabsTest.php
index ebdda6b40a99ac549e544c20074f329f7149fd12..303b5a909170ad05ecb51cdd1ebc7b898b1ae01c 100644
--- a/core/modules/system/lib/Drupal/system/Tests/Form/ElementsVerticalTabsTest.php
+++ b/core/modules/system/lib/Drupal/system/Tests/Form/ElementsVerticalTabsTest.php
@@ -55,13 +55,13 @@ function testJavaScriptOrdering() {
   function testWrapperNotShownWhenEmpty() {
     // Test admin user can see vertical tabs and wrapper.
     $this->drupalGet('form_test/vertical-tabs');
-    $wrapper = $this->xpath("//div[@class='vertical-tabs-panes']");
+    $wrapper = $this->xpath("//div[@data-vertical-tabs-panes]");
     $this->assertTrue(isset($wrapper[0]), 'Vertical tab panes found.');
 
     // Test wrapper markup not present for non-privileged web user.
     $this->drupalLogin($this->web_user);
     $this->drupalGet('form_test/vertical-tabs');
-    $wrapper = $this->xpath("//div[@class='vertical-tabs-panes']");
+    $wrapper = $this->xpath("//div[@data-vertical-tabs-panes]");
     $this->assertFalse(isset($wrapper[0]), 'Vertical tab wrappers are not displayed to unprivileged users.');
   }
 }
diff --git a/core/themes/seven/vertical-tabs.css b/core/themes/seven/vertical-tabs.css
index 9d63396499bd53d2c9ac8da05f7da89cb12e4d81..2bc1096e85862ae07e556e4e7aba43dd1f269973 100644
--- a/core/themes/seven/vertical-tabs.css
+++ b/core/themes/seven/vertical-tabs.css
@@ -68,15 +68,15 @@
 .vertical-tab-button.selected a:focus {
   color: #007ecc;
 }
-.vertical-tabs-panes {
+[data-vertical-tabs-panes] {
   background-color: #fcfcfa;
 }
-html.js .vertical-tabs-panes {
+.vertical-tabs-panes {
   margin: 0 0 0 240px; /* LTR */
   padding: 10px 15px 10px 15px;
   border-left: 1px solid #a6a5a1; /* LTR */
 }
-html.js[dir="rtl"] .vertical-tabs-panes {
+[dir="rtl"] .vertical-tabs-panes {
   margin: 0 240px 0 0;
   border-left: none;
   border-right: 1px solid #a6a5a1;