Introduction

Welcome to the comprehensive guide on mastering the CSS :has() selector! This powerful and dynamic tool enables you to apply styles based on the presence of specific child elements. This functionality allows for more context-aware and responsive designs, elevating the capability of CSS to a new level. In this blog, we’ll explore what the :has() selector is, how to use it effectively, and practical examples to incorporate into your web design projects.

Understanding the :has() Selector

The :has() pseudo-class is part of the CSS Selectors Level 4 specification. It allows you to select an element based on whether it contains another element that matches a given selector. Essentially, it brings parent-level styling into the realm of CSS, which was previously difficult to achieve without JavaScript.

Basic Syntax

element:has(selector) {
  /* CSS rules */
}
            

This rule applies styles to the element if it contains a child that matches the selector.

Practical Examples of the :has() Selector

Styling Parent Elements Based on Child Elements

One common use case for the :has() selector is to style a parent element differently if it contains a specific child element.

/* Style divs that contain an img element */
div:has(> img) {
  border: 2px solid green;
}
            

In this example, any <div> that contains a direct child <img> will have a green border.

Navigation Menu with Active Links

Another practical example is to style a navigation menu item based on whether it contains an active link.

/* Style list items that contain an active link */
nav ul li:has(a.active) {
  background-color: #f0f0f0;
}
            

This rule applies a background color to <li> elements within a <nav> if they contain a link with the class active.

Enhancing Forms with :has()

Highlighting Incomplete Forms

You can use the :has() selector to highlight forms that are incomplete or have errors.

/* Highlight form elements that contain invalid inputs */
form:has(input:invalid) {
  border: 2px solid red;
}
            

In this example, any <form> containing an invalid <input> field will have a red border, making it clear to users which forms need attention.

Advanced Use Cases

Conditional Decorations

You can use :has() to style elements based on the presence or absence of certain children, such as adding decorations to <figure> elements that contain a <figcaption>:

/* Conditional decorations */
figure:has(figcaption) {
  border: 1px solid #ccc;
  padding: 1em;
}
            

This will style <figure> elements only if they contain a <figcaption>, making your design more dynamic and context-aware.

Better Table Striping UX

For improving the user experience of tables with dynamic row counts, :has() can be used to conditionally apply styles:

/* Better table striping UX */
table:has(:is(td, th):nth-child(3)) {
  background-color: #f9f9f9;
}
            

This ensures that table striping only applies if there are at least three columns, avoiding unnecessary or confusing stripes in small tables.

Layout Adjustments

Use :has() for conditional layout changes without modifying your HTML templates. For example, adjusting a grid layout based on the presence of a sidebar:

/* Layout adjustments */
.standard-page:has(.sidebar) {
  grid-template-areas: 's s s m m m m m m m m m';
}

.standard-page:not(:has(.sidebar)) {
  grid-template-areas: '. m m m m m m m m m . .';
}
            

This technique removes the need for conditional classes in your templates, simplifying your HTML while maintaining flexibility in your CSS.

Best Practices for Using the :has() Selector

Performance Considerations

While the :has() selector is powerful, it can be performance-intensive, especially on large documents with many elements. Use it judiciously and test your designs to ensure they remain performant.

Fallbacks for Compatibility

As with any advanced CSS feature, browser support can vary. Ensure you provide fallbacks or polyfills for browsers that do not yet support the :has() selector.

Readability and Maintenance

Keep your CSS readable and maintainable by using the :has() selector in a clear and understandable way. Avoid overly complex selectors that can make your CSS difficult to manage.

Conclusion

The CSS :has() selector is a game-changer for web design, providing powerful new ways to create dynamic, context-aware styles without relying on JavaScript. By mastering this pseudo-class, you can enhance your web design projects with more responsive and intuitive user interfaces. Embrace the power of :has() and take your CSS skills to the next level!

Happy designing!

Playground Demo

Experiment with the :has() selector in this interactive playground demo: