The Evolution of CSS: Mastering the :has() Pseudo-Class

The introduction of the :has() pseudo-class is perhaps the most significant change in CSS architecture in the last decade. Often referred to as the “parent selector,” it allows developers to style an element based on its children or even its preceding siblings. This capability transforms how we handle UI logic, moving many responsibilities from JavaScript back to pure CSS and making our codebases more maintainable.

Dynamic Form Validation Styling

One of the most practical applications of :has() is creating reactive forms without a single line of JavaScript. Traditionally, to style a form fieldset or a label based on whether an input was invalid, you needed to toggle classes via script. Now, you can target the container directly. For instance, you can apply a red border and a shake animation to a fieldset only if it contains an input with an :invalid state that is also not focused.

While exploring these modern capabilities, it is worth noting that :has() works exceptionally well alongside Style Queries in CSS, which allow you to style elements based on the computed values of their parents, creating a robust logic system for your components without relying on class-heavy frameworks.

Context-Aware Layout Adjustments

Using :has(), we can create truly context-aware layouts. Imagine a card component that changes its grid structure only if it contains an image. Previously, this required a specific modifier class like “card–with-image”. With the new pseudo-class, the CSS can detect the presence of the img tag and update the grid-template-areas automatically. This reduces the reliance on manual class management in your CMS or backend logic.

Common use cases for layout logic include:

• Sidebars: Expanding a sidebar width only if it contains a specific “active” navigation element.
• Grids: Changing the number of columns in a gallery if one of the items is marked as “featured” using a child attribute.
• Empty States: Hiding a section header if the following container is empty or has no visible children.

Interactive Navigation and State Management

Creating “mega menus” or complex navigation bars becomes significantly easier. You can style the main navigation background or dim the rest of the page when a specific sub-menu is hovered or focused. By using nav:has(.submenu:hover), the parent nav element can change its appearance to accommodate the expanded content, providing a smoother user experience.

This level of control is a staple in the top 5 modern CSS features for frontend developers, as it simplifies the DOM structure by removing the need for “state” classes like “is-active” or “is-open” in many common interaction scenarios.

Advanced Logical Combinations

The true power of :has() emerges when combined with other pseudo-classes like :not() and :checked. You can create complex logic gates within your stylesheets. For example, you can style a dashboard widget differently only if it has a header but does not have a footer. Or, you can style a “Select All” label based on whether all individual checkboxes within a group are checked.

Example logic: .container:has(input[type=”checkbox”]:not(:checked)). This selector targets a container only if it contains at least one checkbox that is not checked, allowing you to visually indicate an incomplete task list at the container level.

Performance and Browser Support

While :has() is incredibly powerful, it is important to use it judiciously. Because the browser must check the descendants of an element to determine its style, extremely deep nesting or overly broad selectors (like body:has(*)) can theoretically impact rendering performance. However, in modern browser engines, the implementation is highly optimized, and for standard UI components, the performance cost is negligible compared to the overhead of JavaScript-based DOM manipulation.

As of 2024 and 2025, :has() is supported in all major evergreen browsers, making it a production-ready tool for developers looking to write cleaner, more declarative CSS.

We publish more advanced CSS tricks, ready-to-use snippets, and tutorials in our Telegram channel. Subscribe!