1

:has() does not style specific parent element in Firefox.

Working without :has():

aside {
  background-color: purple;
}
<aside class="header-widget-area widget-area site-header-focus-item header-widget-area-inner" data-section="sidebar-widgets-header-widget-3">
  <section id="block-61" class="widget widget_block">
    <div class="selectdiv" id="test">
      <label for="test"></label>
      <select name="test">
        <option value="XX">12345</option>
      </select>
    </div>
  </section>
</aside>

With :has() pseudo-class the style fails to apply for me:

aside:has(section) {
  background-color: purple;
}
<aside class="header-widget-area widget-area site-header-focus-item header-widget-area-inner" data-section="sidebar-widgets-header-widget-3">
  <section id="block-61" class="widget widget_block">
    <div class="selectdiv" id="test">
      <label for="test"></label>
      <select name="test">
        <option value="XX">12345</option>
      </select>
    </div>
  </section>
</aside>
Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
  • 3
    It should work. However it might not be supported in all browsers. https://caniuse.com/css-has – protob Feb 25 '23 at 18:19
  • What browser are you using? – TylerH Feb 25 '23 at 18:48
  • 1
    indeed! i'm using FF 111. setting `layout.css.has-selector.enabled` -> true does the trick; it works as expected. I didn't see this one coming :-/ Not widely supported at all. Is there another "style the parent" approach other than :has() that *IS* supported ? –  Feb 25 '23 at 19:18
  • :has() is supported in all browsers... _except_ Firefox. They're working on it but it's not slated to land for several more versions. That being said, it _can_ be enabled manually by users. I recommend using the property and just including a note that some styling won't work in current Firefox versions; websites do this sort of thing all the time. – TylerH Feb 25 '23 at 19:26
  • Does this answer your question? [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – TylerH Feb 25 '23 at 19:27
  • Maybe. In my html, I generate the `
     –  Feb 25 '23 at 19:37

0 Answers0