Set parent style via child

Question

Let's say I have the following <ul>:

<ul>
<li>Child</li>
<li><span class="active">Child</span></li>
<li>Child</li>
</ul>

Is it possible for me to change the style of the <li> via the active <span>?

E.g.:

.active:parent(li) {
    background-color: red;
}

I've been able to achieve this with jQuery, but it flickers on the screen for a split second (waiting for the DOM to load) and I want to avoid that.

There is no such thing as a parent selector in CSS3, I think there would be no other way than to use javascript. — petroni, Feb 08 '18 at 02:15

dwjohnston · Answer 1 · 2018-02-08T02:46:48.767

4

There's no way to do this in CSS.

The best thing to do would be to do something like:

<ul class="has-active">
    <li>Child</li>
    <li><span class="active">Child</span></li>
    <li>Child</li>
</ul>

And style

ul.has-active  {
    ...
}

If you are looking for something that can do parent selectors, then look at something like xpath.

edited Feb 08 '18 at 02:46

answered Feb 08 '18 at 02:19

dwjohnston

9,419
24
94
167

wut? there's no li.active on your HTML to apply that CSS rule – Facundo Corradini Feb 08 '18 at 02:46
1

This code works fine to style child. The question it was how to style parent with child given. – xargr Sep 30 '19 at 17:18
2

the right answer it's to use :has pseudo class see here: https://developer.mozilla.org/en-US/docs/Web/CSS/:has – xargr Sep 30 '19 at 17:22
2

@xargr 's answer is soooo much under-appreciated! – Hussam Mar 29 '21 at 20:05

score 1 · Answer 2 · edited Jan 11 '19 at 04:18

1

This is impossible with pure CSS because it can't go backwards.

You must use Javascript or jQuery:

$(document).ready(function(){
    $('li').has('.active').css('background-color','yellow');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
    <li>Child</li>
    <li><span class="active">Child</span></li>
    <li>Child</li>
</ul>

edited Jan 11 '19 at 04:18

Neithan Max

9,375
4
34
56

answered Feb 08 '18 at 02:30

Ehsan

12,231
3
23
42

Set parent style via child

2 Answers2

Linked