CSS is constantly evolving, and with its latest updates, writing efficient and maintainable styles has never been easier. Among the most exciting features introduced are the :is(), :where(), and :has() pseudo-classes. These functions are game-changers, allowing developers to write cleaner, smarter, and more powerful CSS. Let’s dive into how they work and why we should start using them today

:is() Selectors

The :is() pseudo-class simplifies our CSS by grouping multiple selectors into one. This reduces repetition and makes our code cleaner and easier to maintain.

//Before: Repetitive Code
h1, h2, h3 {
color: blue;
}

.....

// After: Cleaner with :is()
:is(h1, h2, h3) {
color: blue;
}

Benefit:

• Reduces code duplication.
• Improves readability and maintainability.

With :is(), we can group any number of selectors and apply styles to them in a single declaration.

:where() Selectors

The :where() pseudo-class functions similarly to :is(), but with one key difference: it has zero specificity. This means it won’t override more specific rules in our stylesheet.

Example: Global Defaults with :where()

:where(h1, h2, h3) {
color: red;
}

Use Case:

• Perfect for defining global defaults.
• Ensures these styles don’t interfere with more specific rules elsewhere in your CSS.

:has() Selectors

For years, developers have wanted a way to style parent elements based on their children. Enter :has(). This pseudo-class allows us to apply styles to a parent element if it contains a specific child.

Example: Style a Parent Based on Its Child

.card:has(img) {
border: 2px solid green;
}

Real-World Use Case:

• Add a border to .card only if it contains an element
• Highlight a form field’s parent when it contains an invalid input.

.form-group:has(input:invalid) {
background-color: #ffe6e6;
}

:is() vs. :where()

Why These Functions Are Game-Changers?

• Cleaner Code: Reduce repetition and improve readability.
• Better Maintainability: Easier to update and manage styles.
• Enhanced Power: Solve previously impossible challenges, like styling parents based on children.

:is(h1, h2, h3):has(+ p) {
color: purple;
}

:where(.default-button, .secondary-button) {
background-color: lightgray;
}

Modern CSS tools and browsers now support these pseudo-classes, so there’s no reason to wait. By incorporating :is(), :where(), and :has() into our workflow, we’ll write smarter, more efficient styles and unlock new possibilities in our designs.
Happy coding! 🙂