Intriguing CSS Level 4 Selectors

Intriguing CSS Level 4 Selectors

CSS selectors have progressed massively over the years, giving developers far more power for targeting specific bits on their pages. The examples in this article are part of the CSS Selectors Level 4 specification. Let’s dive in and investigate seven of these intriguing selectors, some of which I guarantee you’ve yet to use in practice!

[…]

Now that we have the logistics out of the way let’s dive in and explore a few of these intriguing CSS level 4 selectors.

[…]

If you’re familiar with “nesting” get ready to have your socks knocked off. Matches can be combined with other :matches selectors to mimic this very same feature that many pre-processor users adore, but from within CSS!

[…]

Unfortunately, most browsers don’t support it, or did at one time and have since removed it entirely. Although Chrome and Safari register a match of the pseudo-class, and therefore apply the CSS rule, they don’t yet support style scoping itself; this means that the applied CSS rule floods beyond the intended portion of the document and is equal to :root. 

[…]