Apply Style to Parent if it Has Child Using CSS
As a web developer, you may encounter situations where you need to apply styles to a parent element based on the presence of specific child elements. While this may seem like a straightforward task, achieving it solely with CSS can be a challenge.
Fortunately, CSS provides selectors that can help you achieve this:
has() Selector:
The has() selector allows you to select an element that contains a specific child element. For example, to apply a style to a parent
ul li:has(ul.sub) {
/* Your styles here */
}Example:
Consider the following HTML structure:
<ul class="main">
<li>Item 1</li>
<li>Item 2</li>
<li>
Item 3
<ul class="sub">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>Using the has() selector, you can apply a blue background to all
ul.main li:has(ul.sub) {
background-color: blue;
}Note: The has() selector is not supported by all browsers. If you need broader browser support, you may consider using a JavaScript solution instead.
The above is the detailed content of How Can I Style a Parent Element Based on its Child Elements Using CSS?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
