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.
Great tip here from Jhey. He advises using a
:root parent of the button when in “pressed” state and sets a root-level custom property to “on”.
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.