Today I Learned - Rocky Kev

TIL ":has" selector

POSTED ON:

TAGS: css organization

The :has() selector is so sweet!

Using this example: ul > li

Before :has(), the subject of a selector was always at the end.

If you wanted to edit the li item, you would do:
ul > li:hover or ul > li:not(.selected)

After :has():

ul:has(> li)

Some more examples:
.parent:has(.child) {...}

An example where a <section> element is the subject, but the selector only matches if one of the children has :focus-visible:

section:has(*:focus-visible) {...}

via State of CSS: Has

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')