> NOTE: it looks like it's not ordinarily working even when switched on.

I find the :has() selector very useful in certain cases, but firefox doesn't support it yet and like you said, it doesn't work very well even when enabled. What I have done for Firefox is use the `@supports selector` query [1] and fallback to some equally functional but not as nicely styled UI with the hope that when Firefox supports it, it will automatically provide the nicer UI.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/@supports#f...

Yes, and thinking, that @supports selector is also suggested in one of the examples in the article:

  /* Warning message 
     about support for :has() */

  @supports selector(:has(img)) {
    body small {
      display: none;
    }
  }

And I sure love it when CSS performs according my preference, but I'd never complain about a UA not implementing or a user prefer her own style over agent or author.

Nice approach! If you ever blog or tweet about CSS I'd be stoked to read it.

This approach is called progressive enhancement [1]; it’s been a thing in web development for over a decade.

[1]: https://alistapart.com/article/understandingprogressiveenhan...