The :has() selector in CSS is a relatively new and powerful pseudo-class selector that allows you to apply styles to an element based on its descendants or children. It enables developers to select elements that contain certain child elements, thus providing a more sophisticated method for styling elements in response to their content. While :has() is not yet supported in all browsers, its potential to enhance CSS selectors is vast, especially when dealing with complex UI designs, form validation, and dynamic content.
In this detailed guide, we will explore the :has() selector in depth, including its syntax, functionality, practical use cases, and potential challenges. By the end of this guide, you’ll have a complete understanding of how to effectively use the :has() selector in your web development projects, making your CSS more powerful and dynamic.
1. Introduction to the :has() Selector
The :has() selector, introduced as part of the CSS Selectors Level 4 specification, allows you to select an element based on whether it contains a particular descendant element. This makes it possible to style a parent element based on the content or structure of its children or descendants. This functionality was not previously possible with traditional CSS, where selectors could only style an element based on its own attributes or classes.
For example, in the past, if you wanted to style a div based on whether it contains a specific child span, you would need to use JavaScript to achieve this dynamic styling. With the :has() selector, CSS can now handle such tasks directly.
The syntax for :has() is:
element:has(selector) {
/* CSS rules */
}
This means you can target an element (element) that contains a descendant matching the selector.
2. Understanding How :has() Works
The :has() pseudo-class selector matches an element if it contains at least one element that matches the specified selector inside it. In other words, you can think of :has() as a parent selector, which allows you to style the parent element based on its children or descendants.
2.1 Example
Consider the following HTML:
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
</div>
<div class="container">
<p>Paragraph 1</p>
</div>
If you want to style .container elements that contain a p with the class .highlight, you can use the :has() selector like this:
.container:has(p.highlight) {
background-color: yellow;
}
In this example, only the first .container will have a yellow background, because it contains a p element with the class .highlight.
2.2 Logical AND with :has()
The :has() selector can combine multiple selectors within the parentheses, meaning that you can apply styles to an element only if it contains all the specified descendants. This makes it much more powerful than simple child selectors.
/* Apply style to .container if it contains both a .highlighted paragraph and an img element */
.container:has(p.highlight, img) {
background-color: yellow;
}
This rule will apply the yellow background to .container elements that contain either a .highlighted paragraph or an img element, not necessarily both.
3. Practical Use Cases for :has()
The introduction of the :has() selector opens up many possibilities for cleaner, more efficient CSS. Below are some practical examples of how the :has() selector can be used.
3.1 Styling a Parent Based on Child State
A common use case for :has() is to style a parent element based on the state of its child elements. For example, you might want to change the background color of a form field or section when it contains invalid input.
<form>
<div class="form-group">
<input type="text" id="username" />
</div>
<div class="form-group">
<input type="text" id="email" />
</div>
</form>
If an invalid email address is entered, you might want to highlight the entire .form-group that contains the invalid input. With the :has() selector, you can do this directly with CSS.
.form-group:has(input:invalid) {
background-color: red;
}
This rule will turn the background red for any .form-group containing an invalid input field.
3.2 Styling Lists Based on Content
The :has() selector can be useful for styling lists of items based on their content. For example, you might want to highlight a ul or ol when it contains a certain type of list item.
<ul>
<li>Item 1</li>
<li class="special">Item 2</li>
</ul>
ul:has(li.special) {
border: 2px solid green;
}
In this case, the ul element will have a green border only if it contains a li element with the class special.
3.3 Styling Parent Elements Based on User Interaction
Another powerful use case for :has() is dynamically styling elements based on user interaction. For example, you might want to change the appearance of a button when the user has selected a specific checkbox or radio button.
<div class="form">
<input type="checkbox" id="agree">
<label for="agree">I agree to the terms and conditions</label>
<button class="submit-btn">Submit</button>
</div>
.form:has(input:checked) .submit-btn {
background-color: blue;
}
This rule will change the background color of the submit button to blue only when the checkbox is checked.
3.4 Combining :has() with Other Selectors
One of the main strengths of the :has() selector is its ability to work alongside other selectors, such as :not(), :first-child, :last-child, etc. This allows you to create very specific styles based on a combination of conditions.
/* Style a section that contains any link and is the first section in the document */
section:has(a):first-of-type {
background-color: lightblue;
}
In this example, the section element will only have the light blue background if it is the first section in the document and contains an anchor (a) tag.
4. Benefits of the :has() Selector
The :has() selector brings several advantages to CSS and web development:
4.1 Simplifies Complex JavaScript Logic
Previously, if you wanted to select a parent element based on the content or state of its children, you would need to write JavaScript to inspect the child elements and then apply styles or make changes. The :has() selector simplifies this task by allowing you to do it purely with CSS.
For example, you no longer need to write JavaScript to check if a checkbox is checked and then add a class to its parent. With :has(), this logic can be handled entirely by CSS.
4.2 Enhances CSS Flexibility
The :has() selector introduces new opportunities to conditionally style elements based on their contents without the need for external libraries or scripts. This improves both the maintainability and performance of your codebase, as you can achieve dynamic styling entirely with CSS.
4.3 Reduces JavaScript Dependency
With the :has() selector, many common UI patterns that once required JavaScript, such as styling a parent element based on child elements’ states or content, can now be achieved with pure CSS. This helps reduce JavaScript bloat and can improve the performance of your web page.
5. Browser Support and Limitations of :has()
As of this writing, the :has() selector is not supported in all browsers, and its usage is primarily limited to modern browsers like Chrome, Safari, and Edge. However, it is important to note that the selector is still in development and may have limited support in older browsers, such as Internet Explorer.
5.1 Current Browser Support
- Chrome: Supported (Chrome 105 and later).
- Safari: Supported (Safari 15.4 and later).
- Edge: Supported (Edge 105 and later).
- Firefox: Not yet supported.
- Internet Explorer: Not supported.
While this feature is being gradually adopted, developers should ensure that their websites provide fallbacks for unsupported browsers, such as using JavaScript to achieve similar effects.
5.2 Performance Considerations
The :has() selector is more powerful than previous CSS selectors but could potentially introduce performance concerns if misused. Specifically, it has the potential to be computationally expensive because it involves traversing the DOM to check for descendant elements. As a result, developers should be mindful of using :has() in scenarios where performance might be impacted, especially with large and complex documents.
6. Advanced Use Cases for :has()
While we’ve covered several basic examples, the :has() selector can be used in more complex scenarios. Some advanced use cases might involve combining :has() with media queries, form validation, and dynamically generated content. Below are some examples of how to take full advantage of this powerful selector.
6.1 :has() with Media Queries
You can combine the :has() selector with CSS media queries to create responsive designs that depend on the presence of certain elements.
@media (min-width: 600px) {
.container:has(img) {
border: 1px solid blue;
}
}
This rule will apply a border to .container elements that contain an image when the viewport is at least 600px wide.
6.2 :has() for Complex Form Validation
Imagine you’re building a form where the submit button should be disabled unless all required fields are filled. With the :has() selector, you can easily style the form based on its input states.
form:has(input:invalid) button {
background-color: gray;
cursor: not-allowed;
}
In