Apply style to parent if it has child with CSS [duplicate]

Question

I'm trying to apply styles to the parent if it has child elements.

So far, I've applied styles to the child elements if present. But I want to style the parent if the parent has child, using ONLY CSS.

following is the html

<ul class="main"> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> <li>aaaa <ul class="sub"> <li>bbbb</li> <li>bbbb <ul> <li>cccc</li> <li>cccc</li> <li>cccc</li> </ul> </li> <li>bbbb</li> <li>bbbb</li> <li>bbbb</li> </ul> </li> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> </ul>

the css code

* { margin:0; padding:0; text-decoration:none; } .main li { display:inline-block; background:yellow; color:green; } .main > li > ul > li { background:orange } .main > li > ul > li > ul >li { background:pink; }

working FIDDLE

See stackoverflow.com/questions/45004/… or stackoverflow.com/questions/1014861/… — Jan Johansen
– Jan Johansen, Commented Jan 21, 2014 at 8:18
Unfortunately I can only answer this question in a comment, but there is a CSS Selector for :empty so If you style the element for with children and then style for when no children with :empty you should achieve the effect you want. — user3094755
– user3094755, Commented Feb 8, 2016 at 17:56

Mikael Dúi Bolinder · Accepted Answer · 2022-12-07 13:27:52Z

144

You can use has():

ul li:has(ul.sub) { ... }

~~It's not possible with CSS3. There is a proposed CSS4 selector, $, to do just that, which could look like this (Selecting the li element):~~

ul $li ul.sub { ... }

See the list of CSS4 Selectors here.

As an alternative, with jQuery, a one-liner you could make use of would be this:

$('ul li:has(ul.sub)').addClass('has_sub');

~~You could then go ahead and style the li.has_sub in your CSS.~~

edited Dec 7, 2022 at 13:27

Mikael Dúi Bolinder

2,2862 gold badges26 silver badges53 bronze badges

answered Jan 21, 2014 at 8:41

MildlySerious

9,2403 gold badges31 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Ryan Smith Over a year ago

According to this similar question: stackoverflow.com/questions/1014861/… the :has() pseudoclass no longer works with any browser as of 2016. Just so people don't get frustrated at this not working.

Nicu Surdu Over a year ago

:has() should be the proposed CSS4 selector instead of the more obscure $ one ...

Dmitry Polushkin Over a year ago

$ now replaced with ! appended to a selector. Look here for more info: w3.org/TR/selectors4/#subject

sites Over a year ago

@NicolaeSurdu you are right, w3 is so backwards

Mordred Over a year ago

According to the Feb 2018 working draft, ! has been replaced with :has()

|

Collectives™ on Stack Overflow

Apply style to parent if it has child with CSS [duplicate]

1 Answer 1

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Linked

Related