HTML & CSS Interview Question #124

What are :is(), :where(), and :has() in modern CSS?

Responsive Design, Modern CSS, Variables, Transitions & Animations Senior Advanced

Quick Interview Answer

:is() groups selector alternatives and takes specificity from the most specific selector in its argument list. :where() also groups selectors but always contributes zero specificity, making it useful for low-specificity defaults.

Detailed Explanation

:is() groups selector alternatives and takes specificity from the most specific selector in its argument list. :where() also groups selectors but always contributes zero specificity, making it useful for low-specificity defaults.

:has() is a relational pseudo-class that can select an element based on matching relative selectors, including descendants or siblings. It enables patterns sometimes described as parent-aware selection, but selectors should remain understandable and performance should be considered in large complex documents.

Code Example

:is(h1, h2, h3) {
    line-height: 1.2;
}

:where(.article, .guide) a {
    text-decoration: underline;
}

.card:has(.badge-sale) {
    border-color: crimson;
}