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) ;)

When class `active` will be on, let's say, #b, which one you want to target? `#a` (last before), or `#d` (last without .active)? Don't forget that support of :last-child is IE9+ — pavel, Jun 04 '15 at 11:18
Well, the active class will always be on the last element. Browser support is not an issue for me :) — Fidel90, Jun 04 '15 at 11:22
@Fidel90 If that's your need, check out my answer with the second snippet! — Praveen Kumar Purushothaman, Jun 04 '15 at 11:28
@PraveenKumar: I did and accepted ;) Thank you very much for the effort! — Fidel90, Jun 04 '15 at 11:34

score 5 · Accepted Answer · edited May 23 '17 at 12:05

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>

Your partial solution did it for me! Thank you very much :) – Fidel90 Jun 04 '15 at 11:32 — Fidel90, Jun 04 '15 at 11:32
@Fidel90 Gald that it helped you! – Praveen Kumar Purushothaman Jun 04 '15 at 11:40 — Praveen Kumar Purushothaman, Jun 04 '15 at 11:40

score 1 · Answer 2 · edited Jun 16 '15 at 00:09

1

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.

edited Jun 16 '15 at 00:09

Praveen Kumar Purushothaman

164,888
24
203
252

answered Jun 04 '15 at 11:21

Douwe de Haan

6,247
1
30
45

That's what I was looking for. Thank you! – Fidel90 Jun 04 '15 at 11:33
@Fidel90 If this fixed your problem and the other answers didn't, change the solution to this answer ;) – Douwe de Haan Jun 04 '15 at 11:53

score 1 · Answer 3 · edited Jun 16 '15 at 00:11

1

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>

edited Jun 16 '15 at 00:11

Praveen Kumar Purushothaman

164,888
24
203
252

answered Jun 04 '15 at 11:39

Dimple

453
9
22

CSS Pseudo Class Selection not working

3 Answers3