Multiple overriding of CSS using last-child is not working where first-child is working

Question

I'm facing a problem regarding overriding of css, any help will be appreciated.

We have a list of elements where some of the 'li' have active class

<ul class="the_track">
  <li class="active">One</li>
  <li class="active">Two</li>
  <li class="active">Three</li>
  <li class="active">Four</li>
  <li class="active">Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

By default all of these have background of "#CCC".

ul.the_track li{
  background:#CCC;
}

All the li with 'active' class has the background of '#F00' overrides '#CCC'

ul.the_track li.active{
  background:#F00;
}

Now coming to the problem area, as per my requirement I want the active class to be overridden again.

ul.the_track li.active:first-child{
  /* this is working */
  background:#777;
}

but,

ul.the_track li.active:last-child{
  /* this should not work */
  background:#CCC;
}

so, basically the first-child overriding is working where last-child is not,as it is not the last child of container but how to access this last child is there any alternate CSS solution without involving JS ?.

Here is a snippet for the above code

( For codepen lovers http://codepen.io/shyamaprasad/pen/WGQjXk ) :

ul.the_track li{
  background:#CCC;
}
ul.the_track li.active{
  background:#F00;
}
ul.the_track li.active:first-child{
  /* this is working */
  background:#777;
}
ul.the_track li.active:last-child{
  /* this one should not work */
  background:#CCC;
}

<ul class="the_track">
  <li class="active">One</li>
  <li class="active">Two</li>
  <li class="active">Three</li>
  <li class="active">Four</li>
  <li class="active">Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

It is working correctly. The last-child is Eight, and it isn't .active, so no elements match the selector. — Robert McKee, Sep 10 '16 at 05:41

Mani · Answer 1 · 2016-09-10T06:23:46.110

In css :first-child and:last-child wont work for in between class(.active). It must be start with first of the block then only :first-child will work and end with last of the block then only :last-child will work.

Example: In below .active:first-child and .active:last-child will not work.

<ul class="the_track">
  <li>One</li>
  <li class="active">Two</li>
  <li class="active">Three</li>
  <li class="active">Four</li>
  <li>Five</li>
</ul>

Example: In below .active:first-child and .active:last-child will work.

<ul class="the_track">
  <li class="active">One</li>
  <li>Two</li>
  <li>Three</li>
  <li class="active">Four</li>
  <li class="active">Five</li>
</ul>

We can use jquery for this.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("ul.the_track li.active").last().css("background","#000");
});
</script>


<ul class="the_track">
  <li class="active">One</li>
  <li class="active">Two</li>
  <li class="active">Three</li>
  <li class="active">Four</li>
  <li class="active">Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

 <style>
ul.the_track li{
  background:#CCC;
}
ul.the_track li.active{
  background:#F00;
}
ul.the_track li.active:first-child{
  background:#777;
}

 </style>

Aside from the fact that the question was not tagged jQuery, this will not work as the `active` class is added to and removed from elements. — , Sep 10 '16 at 06:31
I think It will not work in css thats why i posted the option by jquery. If want to do in css we have to provide one more class for last `.active`. we have to write style for it. — Mani, Sep 10 '16 at 06:36
I know. You are right that this needs to be handled by code. My point was that your code doesn't work when the `active` class is added or removed at run-time. — , Sep 10 '16 at 06:41
Yes. You are correct. In run time any other `.active` added it wont work. Thanks for your guaidance. Any other options for this? — Mani, Sep 10 '16 at 06:50

score -2 · Answer 2 · answered Sep 10 '16 at 05:38

-2

As per your HTML last "li" tag, does not contain "active" class:

<li>Eight</li>

There are two solution:

1) add "active" class to li i.e. <li class="active">Eight</li>

2) remove ".active" from css

ul.the_track li:last-child{ 
/*style*/
}

answered Sep 10 '16 at 05:38

Saumil Nagariya

49
1
6

1

Neither of these is a solution to what the OP wants to do, which is to highlight the last element with the `active` class. – Sep 10 '16 at 05:55

Multiple overriding of CSS using last-child is not working where first-child is working

2 Answers2