Let's say our html structure looks like this:
<div class="parent">
<div class="child"></div>
</div>Now on some button action I add active className to child's div.
My question is:
How to style only parent element if child's div has active className
// CSS pseudo code //
if(child.has.className('active')
.parent{
background: red;
}
You can use the :has() pseudo class selector, although that's only supported in newer browsers. Otherwise you'll probably need to use JS.
.parent {
background: #ccc;
}
.parent:has(.active) {
background: steelblue;
color: #eee;
}
/* Ignore below, for stylistic purposes only */
.parent {
margin: 1rem;
padding: 1rem;
border-radius: .5rem;
font-family: Arial, sans-serif;
}<div class="parent">
<div class="child">Child</div>
</div>
<div class="parent">
<div class="child active">Child (active)</div>
</div>For a JS-based solution there are two ways:
active class, you also toggle a class on the parent, say has-active-child and style it accordinglyCollected from the Internet
Please contact [email protected] to delete if infringement.
Comments