Tagged “has”
Using the :has pseudo-class for real
By day I’m currently working on our Design System’s Table component. In order to achieve a design spec where the table has no bottom-border I needed to set:
- all cells in the final row of the
<tfoot>to have no bottom-border; but also - if there is no
<tfoot>then set all cells in the final row of the<tbody>to have no bottom-border.
Modern CSS’s support for writing selectors which traverse the DOM up, down and sideways is pretty amazing here.
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;
}: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?
See all tags.