Tagged “parent”
Use CSS :has to set root-level styles based on a button’s state
Great tip here from Jhey. He advises using a button
with ARIA and a little JavaScript for your dark-mode toggle. And to apply the dark styles, use a CSS selector which targets the :root
parent of the button when in “pressed” state and sets a root-level custom property to “on”.
:root:has([aria-pressed=true]) {
--dark:1;
}
Seriously clever stuff!
And aside from the CSS, I really like the way Jhey advocates using a button
rather than a form element such as a checkbox for this kind of interface, much like Léonie did recently.
:has(): the family selector (Chrome developers blog)
The :has() CSS pseudo-class represents an element if any of the selectors passed as parameters match at least one element. But, it's more than a "parent" selector. That's a nice way to market it. The not so appealing way might be the "conditional environment" selector. But that doesn't have quite the same ring to it. How about the “family” selector?
The CSS :has() pseudo-class is a game-changer and can do more than act as a parent selector, as Jhey illustrates.
See all tags.