How to style conditionally ul element

Asked Dec 06 '18 at 12:44

Active Dec 06 '18 at 14:30

Viewed 33 times

I would like to to apply a different style to ul, if within its li there is a input tag

So the first list should look different from the second one. How to achieve this in regular CSS with no JS?

<ul>
    <li><input disabled="" type="checkbox"> Item unchecked</li>
    <li><input checked="" disabled="" type="checkbox"> Item checked</li>
</ul>

<ul>
    <li>Item unchecked</li>
    <li>Item checked</li>
</ul>

edited Dec 06 '18 at 14:30

Jin

asked Dec 06 '18 at 12:44

Radex

1

you can't with css only – Fabrizio Calderan Dec 06 '18 at 12:45
2

You cannot target parent with CSS yet so you will need javascript for this particular problem. – Jake Dec 06 '18 at 12:46
There is a `:has()` selector in the CSS4 draft which would let you inspect child elements in a selector, but [no browsers support it yet](https://caniuse.com/#feat=css-has). – MTCoster Dec 06 '18 at 12:50

0 Answers0