:not() is not ignoring class in list-items with links

Question

I'm trying to use :not() to ignore the .current class in the first list item.

HTML:

<ul>
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Page 2</a</li>
    <li><a href="#">Page 3</a></li>
</ul>

CSS:

ul li a:not(.current){color:red}

I can't get the :not() to ignore the .current class.

I have also tried:

 ul li a:not(.current a){color:red}

Fiddle

Answer 1

the :not applies to element in use, so apply to li which is using current in this case

plus, not sure if was a typo, but in your second li , the a was missing a < in closing tag

 ul li:not(.current) a { color:red } 

 <ul> <li class="current"><a href="#">Home</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> 

Answer 2

Your class is on the li element in your html so:

ul li:not(.current) a { color: red; }

should work.