CSS3 not selector with last

Question

I have the following css that the last-child should change, which does not have the "myClass" class, but I cannot get it to work.

Any ideas I'm wrong about?

ul li:not(.myClass):last-child a { font-style:italic; } 

Example html for query:

 <ul> <li><a href="#">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> <li class="myClass"><a href="#">Extra</a></li> </ul> 

I want to apply css to li three ...

Answer 1

this cannot be done with css, only if you can use jQuery can you find this solution useful.

http://jsfiddle.net/6ku3Y/

 $('ul li').not('.myClass').last().find('a').addClass('mystyle');​ 

Answer 2

If you are sure that the item you want to target is the last but one, you can use nth-last-child(2)

 ul li:nth-last-child(2) a { border-right:0px solid #000; } 

Answer 3

If you want to apply CSS only to li three, try: nth-child (3)

 ul li:nth-child(3) a​ { border-right:0 }​ 

http://jsfiddle.net/hhncn/

This pseudo-class matches elements based on their positions in the list of parent elements of child elements. - http://reference.sitepoint.com/css/pseudoclass-nthchild

Answer 4

Try something like this:

 ul li:not(.myClass):nth-last-of-type(2) a { border-right:0px solid #000; } 

WATCH DEMO

Answer 5

Existing CSS syntax is not able to simplify the AND operator to perform this style. What you need is the CSS LESS Framework.

This will allow you to do this:

 ul > li:not(.myClass) { li:last-child { //style here } }