:has() CSS Pseudo Class

The :has() pseudo-class is a powerful CSS relational selector that allows you to style elements based on the presence of certain descendants or conditions within them. Essentially, it enables a parent element to be selected if it contains a child element that matches a specified selector. This capability goes beyond traditional CSS selectors, which typically flow from parent to child, allowing for a more context-aware and dynamic approach to styling elements. For instance, you can highlight a div if it contains an img without needing JavaScript.

One of the most common use cases of :has() is conditional styling based on form interactions. For example, you can style a form when it contains an input that is currently focused:

form:has(input:focus) {
    border: 2px solid blue;
    background-color: #f0f8ff;
}

Here, any form that contains a focused input will have a highlighted border and subtle background color. This selector is also extremely useful for styling lists dynamically, such as highlighting a li item when it contains a checked input of type checkbox:

li:has(input[type="checkbox"]:checked) {
    font-weight: bold;
    text-decoration: underline;
}

The :has() pseudo-class can also be combined with other selectors, pseudo-classes, and pseudo-elements to create complex, context-sensitive designs. However, since it can involve checking child elements across potentially large DOM trees, it may have performance implications if overused, especially in pages with many elements. Its syntax is straightforward: element:has(selector), where selector can be any valid CSS selector or a comma-separated list of selectors.

Overall, :has() provides designers and developers with a method to express styles that depend on internal document structure, previously only possible with JavaScript. It marks a significant evolution in CSS by introducing a “parent-aware” mechanism for styling content.