New Era of Selectors

In recent years, CSS has introduced functions that radically simplify the layout designer's life.

1. True Magic: :has()

It's called the " parent selector " . It allows selecting a parent if it contains a specific child or state.

/* Select card ONLY if it contains an image inside */
.card:has(img) { padding: 0; }

/* Highlight form if one of its fields inside is invalid */
form:has(input:invalid) { border: 2px solid red; }

2. Grouping: :is() and :where()

Allows writing compactly.

/* Instead of long: h1, h2, h3, h4 { ... } */
:is(h1, h2, h3) { color: blue; }

• Difference: :is() takes the specificity of the heaviest argument. :where() Always has ZERO specificity. This is the ideal way to set " weak " default styles that are easy to override.

3. Negation: :not()

Excludes elements from selection.

/* Color all links except those in menu */
a:not(.menu-link) { color: green; }

Important: These functions make code incredibly powerful and save tons of extra JavaScript for managing classes.