diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index e49bb76de70bad7222c244a21306809fbf94c295..1d24dd501296b58a2634ba8cb83975fec0eaa55e 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -2511,22 +2511,6 @@ function template_preprocess_html(&$variables) {
   // Add a class that tells us whether the page is viewed by an authenticated user or not.
   $variables['attributes']['class'][] = $variables['logged_in'] ? 'logged-in' : 'not-logged-in';
 
-  // Add information about the number of sidebars.
-  if (!empty($variables['page']['sidebar_first']) && !empty($variables['page']['sidebar_second'])) {
-    $variables['attributes']['class'][] = 'two-sidebars';
-  }
-  elseif (!empty($variables['page']['sidebar_first'])) {
-    $variables['attributes']['class'][] = 'one-sidebar';
-    $variables['attributes']['class'][] = 'sidebar-first';
-  }
-  elseif (!empty($variables['page']['sidebar_second'])) {
-    $variables['attributes']['class'][] = 'one-sidebar';
-    $variables['attributes']['class'][] = 'sidebar-second';
-  }
-  else {
-    $variables['attributes']['class'][] = 'no-sidebars';
-  }
-
   // Populate the body classes.
   if ($suggestions = theme_get_suggestions(arg(), 'page', '-')) {
     foreach ($suggestions as $suggestion) {
@@ -2539,11 +2523,6 @@ function template_preprocess_html(&$variables) {
     }
   }
 
-  // If on an individual node page, add the node type to body classes.
-  if ($node = menu_get_object()) {
-    $variables['attributes']['class'][] = drupal_html_class('node-type-' . $node->getType());
-  }
-
   // Initializes attributes which are specific to the html and body elements.
   $variables['html_attributes'] = new Attribute;
 
diff --git a/core/modules/node/node.module b/core/modules/node/node.module
index 0ad789d4f48e039e6beed699930bc6578297d638..ed31eeaaeb23665992868fd6e091cce33a78ef28 100644
--- a/core/modules/node/node.module
+++ b/core/modules/node/node.module
@@ -577,6 +577,16 @@ function node_is_page(EntityInterface $node) {
   return (!empty($page_node) ? $page_node->id() == $node->id() : FALSE);
 }
 
+/**
+ * Implements hook_preprocess_HOOK() for HTML document templates.
+ */
+function node_preprocess_html(&$variables) {
+  // If on an individual node page, add the node type to body classes.
+  if ($node = menu_get_object()) {
+    $variables['attributes']['class'][] = drupal_html_class('node-type-' . $node->getType());
+  }
+}
+
 /**
  * Implements hook_preprocess_HOOK() for block templates.
  */
diff --git a/core/modules/overlay/css/overlay-child.css b/core/modules/overlay/css/overlay-child.css
index 8162d5b2e209b34d083413cfcf2ea35c267dfa8e..b40e3af97ddf65ea695ca2e6b5ea1fb1e8962e62 100644
--- a/core/modules/overlay/css/overlay-child.css
+++ b/core/modules/overlay/css/overlay-child.css
@@ -63,7 +63,7 @@ html[dir="rtl"] {
 #overlay-title:focus {
   outline: 0;
 }
-.overlay #skip-link a {
+.overlay .skip-link {
   color: #fff; /* This is white to contrast with the dark background behind it. */
 }
 
diff --git a/core/modules/system/templates/html.html.twig b/core/modules/system/templates/html.html.twig
index 6bdbe87e21ea9bfda360be12c7036a66997ea8e1..209b9140797fa184f4eb96b97d4cbac2f7b532f0 100644
--- a/core/modules/system/templates/html.html.twig
+++ b/core/modules/system/templates/html.html.twig
@@ -35,11 +35,9 @@
     {{ scripts }}
   </head>
   <body{{ attributes }}>
-    <div id="skip-link">
-      <a href="#main-content" class="visually-hidden focusable">
-        {{ 'Skip to main content'|t }}
-      </a>
-    </div>
+    <a href="#main-content" class="visually-hidden focusable skip-link">
+      {{ 'Skip to main content'|t }}
+    </a>
     {{ page_top }}
     {{ page }}
     {{ page_bottom }}
diff --git a/core/themes/bartik/bartik.theme b/core/themes/bartik/bartik.theme
index 593923ae7a3bcd87ede2f58a1b8d4f6baec91359..4a56b7d29742c2863cb294528e9a57064c030faa 100644
--- a/core/themes/bartik/bartik.theme
+++ b/core/themes/bartik/bartik.theme
@@ -13,6 +13,22 @@
  * Adds body classes if certain regions have content.
  */
 function bartik_preprocess_html(&$variables) {
+  // Add information about the number of sidebars.
+  if (!empty($variables['page']['sidebar_first']) && !empty($variables['page']['sidebar_second'])) {
+    $variables['attributes']['class'][] = 'two-sidebars';
+  }
+  elseif (!empty($variables['page']['sidebar_first'])) {
+    $variables['attributes']['class'][] = 'one-sidebar';
+    $variables['attributes']['class'][] = 'sidebar-first';
+  }
+  elseif (!empty($variables['page']['sidebar_second'])) {
+    $variables['attributes']['class'][] = 'one-sidebar';
+    $variables['attributes']['class'][] = 'sidebar-second';
+  }
+  else {
+    $variables['attributes']['class'][] = 'no-sidebars';
+  }
+
   if (!empty($variables['page']['featured'])) {
     $variables['attributes']['class'][] = 'featured';
   }
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index eaa306186ed0ad4fc273261dc1fb3a59c6fa99e8..5dad1108c85cb58b98600fdd8bdfeb947754b530 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -114,7 +114,7 @@ body,
 }
 #header,
 #footer-wrapper,
-#skip-link,
+.skip-link,
 ul.contextual-links,
 ul.links,
 ul.primary,
@@ -315,17 +315,18 @@ ul.tips {
 }
 
 /* ------------------ Header ------------------ */
-#skip-link {
+.skip-link,
+.skip-link.visually-hidden.focusable {
   left: 50%;
   margin-left: -5.25em;
   margin-top: 0;
-  position: absolute;
+  position: absolute !important;
   width: auto;
   z-index: 50;
 }
-#skip-link a,
-#skip-link a:link,
-#skip-link a:visited {
+.skip-link,
+.skip-link:link,
+.skip-link:visited {
   background: #444;
   background: rgba(0, 0, 0, 0.6);
   color: #fff;
@@ -336,9 +337,9 @@ ul.tips {
   text-decoration: none;
   border-radius: 0 0 10px 10px;
 }
-#skip-link a:hover,
-#skip-link a:active,
-#skip-link a:focus {
+.skip-link:hover,
+.skip-link:active,
+.skip-link:focus {
   outline: 0;
 }
 #logo {
diff --git a/core/themes/bartik/templates/maintenance-page.html.twig b/core/themes/bartik/templates/maintenance-page.html.twig
index 083c40105c503415ce8665265251d72dff583f02..031f073f5e85fe4308eda64545623e7ffa24abbe 100644
--- a/core/themes/bartik/templates/maintenance-page.html.twig
+++ b/core/themes/bartik/templates/maintenance-page.html.twig
@@ -20,9 +20,9 @@
 </head>
 <body class="{{ attributes.class }}"{{ attributes }}>
 
-  <div id="skip-link">
-    <a href="#main-content" class="visually-hidden focusable">{{ 'Skip to main content'|t }}</a>
-  </div>
+  <a href="#main-content" class="visually-hidden focusable skip-link">
+    {{ 'Skip to main content'|t }}
+  </a>
 
   <div id="page-wrapper"><div id="page">
 
diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme
index 29f1711378257fecb55edd0301e80af0b12c6d6e..67ebb0f9b38e63f6f9ff3c79de8e1d369f678f4f 100644
--- a/core/themes/seven/seven.theme
+++ b/core/themes/seven/seven.theme
@@ -30,6 +30,20 @@ function seven_library_info() {
   return $libraries;
 }
 
+/**
+ * Implements hook_preprocess_HOOK() for HTML document templates.
+ */
+function seven_preprocess_html(&$variables) {
+  // Add information about the number of sidebars.
+  if (!empty($variables['page']['sidebar_first'])) {
+    $variables['attributes']['class'][] = 'one-sidebar';
+    $variables['attributes']['class'][] = 'sidebar-first';
+  }
+  else {
+    $variables['attributes']['class'][] = 'no-sidebars';
+  }
+}
+
 /**
  * Implements hook_preprocess_HOOK() for page templates.
  */
diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css
index 69ef6ec5b24d96aae1bbb1754239618ee446b30a..58668082a55be64913aab228aef56f01cc37ad5e 100644
--- a/core/themes/seven/style.css
+++ b/core/themes/seven/style.css
@@ -158,7 +158,7 @@ pre {
 /**
  * Skip link.
  */
-#skip-link {
+.skip-link {
   margin-top: 0;
   position: absolute;
   left: 50%; /* LTR */
@@ -166,13 +166,13 @@ pre {
   width: auto;
   z-index: 50;
 }
-[dir="rtl"] #skip-link {
+[dir="rtl"] .skip-link {
   right: 50%;
   margin-right: -5.25em;
 }
-#skip-link a,
-#skip-link a:link,
-#skip-link a:visited {
+.skip-link,
+.skip-link:link,
+.skip-link:visited {
   display: inline-block;
   background: #444;
   color: #fff;
@@ -181,14 +181,14 @@ pre {
   text-decoration: none;
   border-radius: 0 0 10px 10px;
 }
-[dir="rtl"] #skip-link a,
-[dir="rtl"] #skip-link a:link,
-[dir="rtl"] #skip-link a:visited {
+[dir="rtl"] .skip-link,
+[dir="rtl"] .skip-link:link,
+[dir="rtl"] .skip-link:visited {
   padding: 1px 10px 2px 10px;
 }
-#skip-link a:hover,
-#skip-link a:focus,
-#skip-link a:active {
+.skip-link:hover,
+.skip-link:focus,
+.skip-link:active {
   outline: 0;
 }