CSS Pseudo Class Selection not working

Question

I have the following HTML structure:

<ol>
    <li><a id="a" href="#">Not this</a></li>
    <li><a id="b" href="#">Not this</a></li>
    <li><a id="c" href="#">This one</a></li>
    <li class="active"><span>Not this</span></li>
</ol>

I want to select #c via CSS. I have tried:

ol > li:not(.active):last-child > a {
  border: 1px solid green;
}

As I understand it li:not(.active) selects all the li elements but the one with class .active.

On this selection I use :last-child to get the last of these li elements. But this wont work. What's wrong? Is it possible what I'm trying to achieve?

Thank you very much :)

PS: The list length is dynamic and the elements does not have any id that could be used for CSS selection (I just used some in the example to clarify which element I want to select) ;)

Answer 1

The pseudo code that you wrote works ! There's no last-child of <li> with no active class. So your code fails any time! Check with another one in which, the last <li> doesn't have an active .

Or you need to use last-of-type . Check the fiddle:

 ol > li:not(.active):last-child > a { border: 1px solid green; } ol > li:not(.active):last-of-type > a { border: 1px solid green; } 

 <ol> <li><a id="a" href="#">Not this</a></li> <li><a id="b" href="#">Not this</a></li> <li><a id="c" href="#">This one</a></li> <li class="active"><span>Not this</span></li> </ol> <ol> <li><a id="a" href="#">Not this</a></li> <li><a id="b" href="#">Not this</a></li> <li class="active"><span>Not this</span></li> <li><a id="c" href="#">This one</a></li> </ol> 

One thing to note is, last-of-type doesn't consider :not() . Check CSS: How to say .class:last-of-type [classes, not elements!] ! You might need to use JavaScript or jQuery for this.

Partial Solution

If you know that the Not this always occurs in the last, you can use nth-last-child(2) :

 ol > li:not(.active):nth-last-child(2) > a { border: 1px solid green; } 

 <ol> <li><a id="a" href="#">Not this</a></li> <li><a id="b" href="#">Not this</a></li> <li><a id="c" href="#">This one</a></li> <li class="active"><span>Not this</span></li> </ol> 

Answer 2

You could try the following CSS:

 ol > li:not(.active):nth-last-child(1) > a, ol > li:not(.active):nth-last-child(2) > a { border: 1px solid green; } 

 <ol> <li><a id="a" href="#">Not this</a> </li> <li><a id="b" href="#">Not this</a> </li> <li><a id="c" href="#">This one</a> </li> <li class="active"><a id="d" href="#">Not this</a> </li> </ol> <ol> <li><a id="e" href="#">Not this</a> </li> <li><a id="f" href="#">Not this</a> </li> <li class="active"><a id="g" href="#">Not this</a> </li> <li><a id="h" href="#">This one</a> </li> </ol> 

This code would work only if the last two can't have the active class at the same time. If they, at some point, both have the active class, this css would also fail.

Answer 3

Check this out: https://css-tricks.com/useful-nth-child-recipies/

If you want to select only second last child then you can try:

 ol li:nth-last-child(2) a{ border:1px solid green } 

 <ol> <li><a id="a" href="#">Not this</a></li> <li><a id="b" href="#">Not this</a></li> <li><a id="c" href="#">This one</a></li> <li class="active"><span>Not this</span></li> </ol>