--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -152,35 +152,35 @@ panelview[mainview] > .panel-header {
 #TabsToolbar[customizing="true"] > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .tabs-newtab-button {
   visibility: collapse;
 }
 
 #tabbrowser-tabs:not([overflow="true"])[using-closing-tabs-spacer] ~ #alltabs-button {
   visibility: hidden; /* temporary space to keep a tab's close button under the cursor */
 }
 
-.tabbrowser-tab {
+#tabbrowser-tabs > .tabbrowser-tab {
   -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tab");
 }
 
-.tabbrowser-tab:not([pinned]) {
+#tabbrowser-tabs > .tabbrowser-tab:not([pinned]) {
   -moz-box-flex: 100;
   max-width: 225px;
   min-width: var(--tab-min-width);
   width: 0;
   transition: min-width 100ms ease-out,
               max-width 100ms ease-out;
 }
 
-:root[uidensity=touch] .tabbrowser-tab:not([pinned]) {
+:root[uidensity=touch] #tabbrowser-tabs > .tabbrowser-tab:not([pinned]) {
   /* Touch mode needs additional space for the close button. */
   min-width: calc(var(--tab-min-width) + 10px);
 }
 
-.tabbrowser-tab:not([pinned]):not([fadein]) {
+#tabbrowser-tabs > .tabbrowser-tab:not([pinned]):not([fadein]) {
   max-width: 0.1px;
   min-width: 0.1px;
   visibility: hidden;
 }
 
 .tab-icon-image[fadein],
 .tab-close-button[fadein],
 .tabbrowser-tab[fadein]::after,
@@ -218,17 +218,17 @@ panelview[mainview] > .panel-header {
 
 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[selected],
 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[multiselected] {
   position: relative;
   z-index: 2;
   pointer-events: none; /* avoid blocking dragover events on scroll buttons */
 }
 
-.tabbrowser-tab[tabdrop-samewindow],
+#tabbrowser-tabs > .tabbrowser-tab[tabdrop-samewindow],
 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[fadein]:not([selected]):not([multiselected]) {
   transition: transform 200ms var(--animation-easing-function);
 }
 
 /* The next 3 rules allow dragging tabs slightly outside of the tabstrip
  * to make it easier to drag tabs. */
 #TabsToolbar[movingtab] {
   padding-bottom: 15px;

--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -627,27 +627,27 @@ html|input.urlbar-input {
 .tab-icon-overlay {
   opacity: 0.9999;
 }
 
 .tab-label-container:not([selected="true"]) {
   opacity: .7;
 }
 
-.tabbrowser-tab {
+#tabbrowser-tabs > .tabbrowser-tab {
   font: message-box;
   border: none;
 }
 
-.tabbrowser-tab[visuallyselected=true]:not(:-moz-lwtheme) {
+#tabbrowser-tabs > .tabbrowser-tab[visuallyselected=true]:not(:-moz-lwtheme) {
   /* overriding tabbox.css */
   color: hsl(240, 5%, 5%);
 }
 
-.tabbrowser-tab[visuallyselected=true] {
+#tabbrowser-tabs > .tabbrowser-tab[visuallyselected=true] {
   /* overriding tabbox.css */
   text-shadow: inherit;
 }
 
 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label-container:not([pinned]),
 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-icon-image[pinned],
 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-throbber[pinned] {
   box-shadow: var(--focus-ring-box-shadow);
@@ -670,17 +670,17 @@ html|input.urlbar-input {
 :root:-moz-any([inFullscreen], [tabsintitlebar]) #TabsToolbar:not(:-moz-lwtheme) {
   -moz-appearance: -moz-mac-vibrant-titlebar-dark;
   -moz-font-smoothing-background-color: -moz-mac-vibrant-titlebar-dark;
   background-color: #232323;
   color: hsl(240, 9%, 98%);
   text-shadow: none;
 }
 
-.tabbrowser-tab[visuallyselected=true]:not(:-moz-lwtheme) {
+#tabbrowser-tabs > .tabbrowser-tab[visuallyselected=true]:not(:-moz-lwtheme) {
   -moz-font-smoothing-background-color: var(--toolbar-bgcolor);
 }
 
 #tabbrowser-tabs {
   -moz-box-align: stretch;
 }
 
 /**

--- a/browser/themes/osx/compacttheme.css
+++ b/browser/themes/osx/compacttheme.css
@@ -9,11 +9,11 @@
   background: var(--chrome-background-color);
 }
 
 #TabsToolbar:-moz-lwtheme-darktext {
   -moz-appearance: -moz-mac-vibrant-titlebar-light;
   -moz-font-smoothing-background-color: -moz-mac-vibrant-titlebar-light;
 }
 
-.tabbrowser-tab[visuallyselected=true] {
+#tabbrowser-tabs > .tabbrowser-tab[visuallyselected=true] {
   -moz-font-smoothing-background-color: var(--toolbar-bgcolor);
 }

--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -60,29 +60,29 @@
   .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
     /* Needed to prevent tabstrip from growing as wide as the sum of the tabs'
        page-title widths (when we'd rather have it be as wide as the window and
        compress the tabs to their minimum size): */
     max-width: 100%;
   }
 }
 
-.tabbrowser-tab {
+#tabbrowser-tabs > .tabbrowser-tab {
   -moz-appearance: none;
   background-color: transparent;
   border-radius: 0;
   border-width: 0;
   margin: 0;
   padding: 0;
   -moz-box-align: stretch;
 }
 
 /* The selected tab should appear above the border between the tabs toolbar and
    the navigation toolbar. */
-.tabbrowser-tab[visuallyselected=true] {
+#tabbrowser-tabs > .tabbrowser-tab[visuallyselected=true] {
   position: relative;
   z-index: 2;
 }
 
 .tab-content {
   padding: 0 @horizontalTabPadding@;
 }
 
@@ -487,22 +487,22 @@
   opacity: 0;
 }
 
 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
   transition: opacity 150ms ease;
 }
 
-.tabbrowser-tab:not([visuallyselected=true]),
-.tabbrowser-tab:-moz-lwtheme {
+#tabbrowser-tabs > .tabbrowser-tab:not([visuallyselected=true]),
+#tabbrowser-tabs > .tabbrowser-tab:-moz-lwtheme {
   color: inherit;
 }
 
-.tabbrowser-tab[visuallyselected=true]:-moz-lwtheme {
+#tabbrowser-tabs > .tabbrowser-tab[visuallyselected=true]:-moz-lwtheme {
   color: var(--lwt-tab-text, var(--toolbar-color, inherit));
 }
 
 .tab-line {
   height: 2px;
 }
 
 /* Selected tab */

--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -159,31 +159,31 @@
     /* Always show full-height tab separators on tabs with borders. */
     .tabbrowser-tab:not(:-moz-lwtheme)::before,
     .tabbrowser-tab:not(:-moz-lwtheme)::after {
       border-image: none !important;
     }
 
     /* Show border on tabs with background colors and
      * show the tabs toolbar background color inside tabs. */
-    .tabbrowser-tab:not(:-moz-lwtheme) {
+    #tabbrowser-tabs > .tabbrowser-tab:not(:-moz-lwtheme) {
       background-color: hsl(235,33%,19%) !important;
       border-top: 1px solid var(--tabs-border-color);
       background-clip: padding-box;
     }
 
     /* The top border on top of the tab background is replaced
      * by the slightly transparent outside tabs-border-color. */
     .tab-background:not(:-moz-lwtheme) {
       border-top-style: none !important;
     }
 
     /* The border at the end of the tab strip is replaced
      * by the slightly transparent outside tabs-border-color. */
-    .tabbrowser-tab[last-visible-tab]:not(:-moz-lwtheme) {
+    #tabbrowser-tabs > .tabbrowser-tab[last-visible-tab]:not(:-moz-lwtheme) {
       border-inline-end: 1px solid var(--tabs-border-color);
     }
 
     .tabbrowser-tab[last-visible-tab]:not(:-moz-lwtheme)::after {
       display: none !important;
     }
   }
 }

--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -29,17 +29,17 @@
 @media (-moz-os-version: windows-win7) {
   @media (-moz-windows-default-theme) {
     /* Always show light toolbar elements on aero surface. */
     #TabsToolbar {
       color: hsl(240,9%,98%);
     }
 
     /* Keep showing the correct color inside the tabs. */
-    .tabbrowser-tab {
+    #tabbrowser-tabs > .tabbrowser-tab {
       color: var(--chrome-color) !important;
     }
 
     /* Because we're forcing the tabs toolbar to be [brighttext] to
      * get white toolbar button icons, we need to manually set the
      * correct color for the tab hover and multiselect state for the light theme. */
     .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme-darktext,
     .tabbrowser-tab[multiselected] > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme-darktext {
@@ -87,31 +87,31 @@
   /* Always show full-height tab separators on tabs with borders. */
   .tabbrowser-tab::before,
   .tabbrowser-tab::after {
     border-image: none !important;
   }
 
   /* Show border on tabs with background colors and
    * show the tabs toolbar background color inside tabs. */
-  .tabbrowser-tab {
+  #tabbrowser-tabs > .tabbrowser-tab {
     background-color: var(--chrome-background-color) !important;
     border-top: 1px solid var(--tabs-border-color);
     background-clip: padding-box;
   }
 
   /* The top border on top of the tab background is replaced
    * by the slightly transparent outside tabs-border-color. */
   .tab-background {
     border-top-style: none !important;
   }
 
   /* The border at the end of the tab strip is replaced
    * by the slightly transparent outside tabs-border-color. */
-  .tabbrowser-tab[last-visible-tab] {
+  #tabbrowser-tabs > .tabbrowser-tab[last-visible-tab] {
     border-inline-end: 1px solid var(--tabs-border-color);
   }
 
   .tabbrowser-tab[last-visible-tab]::after {
     display: none !important;
   }
 
   /* Use default window colors */

--- a/toolkit/content/widgets.css
+++ b/toolkit/content/widgets.css
@@ -19,10 +19,11 @@
 @import url("chrome://global/skin/groupbox.css");
 @import url("chrome://global/skin/menu.css");
 @import url("chrome://global/skin/menulist.css");
 @import url("chrome://global/skin/notification.css");
 @import url("chrome://global/skin/popup.css");
 @import url("chrome://global/skin/progressmeter.css");
 @import url("chrome://global/skin/richlistbox.css");
 @import url("chrome://global/skin/splitter.css");
+@import url("chrome://global/skin/tabbox.css");
 @import url("chrome://global/skin/toolbar.css");
 @import url("chrome://global/skin/wizard.css");

--- a/toolkit/content/widgets/tabbox.xml
+++ b/toolkit/content/widgets/tabbox.xml
@@ -3,22 +3,17 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 
 <bindings id="tabBindings"
           xmlns="http://www.mozilla.org/xbl"
           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
           xmlns:xbl="http://www.mozilla.org/xbl">
-
   <binding id="tabbox">
-    <resources>
-      <stylesheet src="chrome://global/skin/tabbox.css"/>
-    </resources>
-
     <implementation>
       <property name="handleCtrlTab">
         <setter>
         <![CDATA[
           this.setAttribute("handleCtrlTab", val);
           return val;
         ]]>
         </setter>
@@ -212,20 +207,16 @@
                     .getService(Ci.nsIEventListenerService);
         els.removeSystemEventListener(this._eventNode, "keydown", this, false);
       </destructor>
     </implementation>
   </binding>
 
   <binding id="tabs"
            extends="chrome://global/content/bindings/general.xml#basecontrol">
-    <resources>
-      <stylesheet src="chrome://global/skin/tabbox.css"/>
-    </resources>
-
     <content>
       <xul:spacer class="tabs-left"/>
       <children/>
       <xul:spacer class="tabs-right" flex="1"/>
     </content>
 
     <implementation implements="nsIDOMXULSelectControlElement, nsIDOMXULRelatedElement">
       <constructor>
@@ -529,20 +520,16 @@
         event.stopPropagation();
       ]]>
       </handler>
     </handlers>
 #endif
   </binding>
 
   <binding id="tabpanels">
-    <resources>
-      <stylesheet src="chrome://global/skin/tabbox.css"/>
-    </resources>
-
     <implementation implements="nsIDOMXULRelatedElement">
       <!-- nsIDOMXULRelatedElement -->
       <method name="getRelatedElement">
         <parameter name="aTabPanelElm"/>
         <body>
         <![CDATA[
           if (!aTabPanelElm)
             return null;
@@ -650,20 +637,16 @@
           ]]>
         </setter>
       </property>
     </implementation>
   </binding>
 
   <binding id="tab" display="xul:button"
            extends="chrome://global/content/bindings/general.xml#basetext">
-    <resources>
-      <stylesheet src="chrome://global/skin/tabbox.css"/>
-    </resources>
-
     <content>
       <xul:hbox class="tab-middle box-inherit" xbl:inherits="align,dir,pack,orient,selected,visuallyselected" flex="1">
         <xul:image class="tab-icon"
                    xbl:inherits="validate,src=image"
                    role="presentation"/>
         <xul:label class="tab-text"
                    xbl:inherits="value=label,accesskey,crop,disabled"
                    flex="1"

--- a/toolkit/themes/linux/global/tabbox.css
+++ b/toolkit/themes/linux/global/tabbox.css
@@ -44,25 +44,8 @@ tab[visuallyselected="true"] {
 
 tab + tab {
   margin-inline-start: -2px;
 }
 
 .tab-text {
   margin: 0 !important;
 }
-
-/* ::::: tab-bottom ::::::::::
-   :: Tabs that are attached to the bottom of a panel, but not necessarily
-   :: a tabpanels.
-   ::::: */
-
-.tab-bottom {
-  margin-top: 0;
-  margin-bottom: 2px;
-}
-
-.tab-bottom[visuallyselected="true"] {
-  margin-bottom: 0;
-  margin-top: -2px;
-  padding-top: 6px;
-  padding-bottom: 4px;
-}

--- a/toolkit/themes/windows/global/tabbox.css
+++ b/toolkit/themes/windows/global/tabbox.css
@@ -38,25 +38,8 @@ tab:-moz-focusring > .tab-middle {
   /* Don't specify the outline-color, we should always use initial value. */
   outline: 1px dotted;
 }
 
 tab:first-of-type[visuallyselected="true"] {
   padding-right: 5px;
   padding-left: 5px;
 }
-
-/* ::::: tab-bottom ::::::::::
-   :: Tabs that are attached to the bottom of a panel, but not necessarily
-   :: a tabpanels.
-   ::::: */
-
-.tab-bottom {
-  margin-top: 0;
-  margin-bottom: 2px;
-  padding: 2px 4px 1px 4px;
-}
-
-.tab-bottom[visuallyselected="true"] {
-  margin-bottom: 0;
-  padding: 4px 6px 1px 6px;
-}
-