Question

I need to style (CSS only) the last child element while excluding those with a specific class.

For example, I want to style

<ul>
  <li>Bar</li>
  <li>Bar</li>
  <li>Bar</li>
  <li>Should have a green background</li>
  <li class='foo'>Bar</li>
</ul>

The last li without class ‘foo’ should be green. I tried

li:not(.foo):last-child {
    background-color: green;
}​

or

li:not(.foo):last-of-type {
    background-color: green;
}​

but it doesn’t works.

See http://jsfiddle.net/gentooboontoo/V7rab/2/

Answer 1

I don’t think that will work (it doesn’t work, but I don’t think it should work anyway)

The selector is working, but the second-to-last li is never going to be the :last-child because it isn’t the last-child…

It isn’t like jQuery’s not() method which actually removes the specified element from the selection. The CSS :not selector/filter will ignore the element, but not remove it from the page