Search code examples
csscss-selectorspseudo-class

Using :nth-child and :nth-last-child simultaneously

I can't make :nth-child and :nth-last-child pseudo-classes work simultaneously.

Works well (highlights first 3 elements):

#a li:nth-child(-n+3) {
   background: #fbfcc8; 
}

#a

Works well (highlights last 3 elements):

#b li:nth-last-child(-n+3) {
   background: #fbfcc8; 
}

#b

Doesn't work (highlights first 3 elements and last one):

#c li:nth-child(-n+3), #c li:nth-last-child(-n+3) {
   background: #fbfcc8; 
}

#c

http://jsfiddle.net/8GSQ6/2/

Update:

In real I have more complicated HTML, so seems like it's just a bug.

enter image description here

Solution

  • It's just a bug in Google Chrome 31.0.1650.57 for Mac. Firefox, Safari and latest Google Chrome works well.