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

433 Views Asked by At

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

2

There are 2 best solutions below

0
On BEST ANSWER

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

4
On

Try this:

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

This works for me..

Change id to c1.