Modern CSS Selectors

CSS

The ":has()" Selector

This functon is equal to when some element is inside another one, for example "div .anotherElement{}", but this method just uses the word "has":

The card div element has a button inside it, so it is able to be designed.

The ":is()" Selector

This feature is used to check any matching descendants inside parent elements:

If the "article" and "section" elements have that "h2" object inside them, both the "h2" elements get colored. If only "section" element had the "h2" tag, then only there it would be colored.

The ":where()" Selector

Its very similar to the ":is()" function, but this one can be overridden:

If it matches the object inside the specified elements, they get colored - but if you have overwrote the style on one of the objects inside the parent elements, the "where" selector won't apply to them anymore, since they are overwritten.

Attribute Selectors

This is used alot by developers, who want to style very specific type of elements. For instance, here's this checkbox, that's being styled specifically:

If there was a different type of input, it wouldn't get styled, because you use the specific selector method "input[type="checkbox"]".

The "data-role" Attribute

Another used feature by creators in web development, who want to use the final solution to make a ID/class-like attribute:

This can be used in JavaScript, CSS and more. Its a way to define your element's purpose by passing custom data for scripts, components, or logic (user roles, categories, states etc).