Change ul background color whose li has a specific class

Question

I have a ul list whose li has a specific class. I want to change the back ground color of that ul.

Eg:

<ul class="dropdown-menu">
    <li class="">About us</li>
    <li class="">Why Join?</li>
    <li class="">Constitution</li>

</ul>
<ul class="dropdown-menu">
    <li class="active">2016 Conference</li>
    <li class="">Member Home Page</li>
    <li class="">Bulletin Board</li>
</ul>

I want to change second ul background color.

I have tried following code

ul.dropdown-menu li.active {
    background-color: #e9124a !important;
}

So you're trying to set the background of the parent `ul` of an active `li` element? — Andrew Li, Sep 30 '16 at 13:07
yes i want to change the color of 2nd ul whose li has active class — Prashant Sharma, Sep 30 '16 at 13:09
with only CSS ( Cascading Style Sheets ) you can select ONLY from TOP to BOTTOM of the HTML structure. not the other way. so you CAN'T select an element based on it's children . — Mihai T, Sep 30 '16 at 13:13

score 1 · Answer 1 · answered Sep 30 '16 at 13:13

Check out this...

I think you cannot do it without the help of Javascript

document.getElementsByClassName('active')[0].parentElement.style.background = '#e9124a';

<ul class="dropdown-menu">
  <li class="">About us</li>
  <li class="">Why Join?</li>
  <li class="">Constitution</li>

</ul>
<ul class="dropdown-menu">
  <li class="active">2016 Conference</li>
  <li class="">Member Home Page</li>
  <li class="">Bulletin Board</li>
</ul>

Good job with JavaScript DOM Nodes handling! – RPichioli Sep 30 '16 at 13:19 — RPichioli, Sep 30 '16 at 13:19

score 0 · Answer 2 · answered Sep 30 '16 at 13:07

If you want to select the 2nd ul element:

.dropdown-menu:nth-child(2) {
  background-color: #F0D0D0;
  }

<ul class="dropdown-menu">
    <li class="">About us</li>
    <li class="">Why Join?</li>
    <li class="">Constitution</li>

</ul>
<ul class="dropdown-menu">
    <li class="active">2016 Conference</li>
    <li class="">Member Home Page</li>
    <li class="">Bulletin Board</li>
</ul>

If you want to select all the ul who contains a li with class active, as far as I know it is not possible with only CSS.

score 0 · Answer 3 · answered Sep 30 '16 at 13:15

with CSS ( Cascading Style Sheets ) you can select ONLY from TOP to BOTTOM of the HTML structure. not the other way. so you CAN'T select an element based on it's children .

you can do this with a simple jQuery see snippet below

$("ul").has("li.active").css("background-color","#e9124a ")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu">
    <li class="">About us</li>
    <li class="">Why Join?</li>
    <li class="">Constitution</li>

</ul>
<ul class="dropdown-menu">
    <li class="active">2016 Conference</li>
    <li class="">Member Home Page</li>
    <li class="">Bulletin Board</li>
</ul>

score -2 · Answer 4 · edited May 23 '17 at 10:27

-2

See this question here

There is currently no way to select the parent of an element in CSS. In the meantime, you'll have to resort to JavaScript if you need to select a parent element.

edited May 23 '17 at 10:27

Community

1
1

answered Sep 30 '16 at 13:08

Aleksandar Matic

779
1
9
21

Please flag as a duplicate if you the answer is on another post. Also, this isn't a forum, and those aren't 'threads'. – Andrew Li Sep 30 '16 at 13:09
It's not actually the answer, it's just a more generic question, but it would give this guy a clue. – Aleksandar Matic Sep 30 '16 at 13:11
It *is* an answer. A rule of thumb: if most of your post is quoted from another post and almost exactly answers it, flag as duplicate. – Andrew Li Sep 30 '16 at 13:11
OK, will do from now on. Thanks. – Aleksandar Matic Sep 30 '16 at 13:12

score -2 · Answer 5 · answered Sep 30 '16 at 13:11

you can add a new class for the second ul. e.g.

<ul class="dropdown-menu">
    <li class="">About us</li>
    <li class="">Why Join?</li>
    <li class="">Constitution</li>

</ul>
<ul class="dropdown-menu new-color">
    <li class="active">2016 Conference</li>
    <li class="">Member Home Page</li>
    <li class="">Bulletin Board</li>
</ul>

ul.dropdown-menu li.active {
    background-color: #e9124a !important;
}

//setting the color of the second ul
.new-color {
    background-color: #c6ffb3 !important;
}

Adding a class to `ul` doesn't mean the `ul` contains `li.active` — Tân, Sep 30 '16 at 13:12

Change ul background color whose li has a specific class

5 Answers5