there is strange problem: after blink update selector .groups .group:nth-child(2):nth-last-child(2){}
just stop working.
But it still works well in webkit and gecko
Usage of nth-last-of-type instead nth-last-child save the day.
.groups .group{
background-color:#000;
}
.groups .group:first-child{
background-color:yellow;
}
.groups .group:nth-child(2):nth-last-of-type(2),
.groups .group:nth-child(2):last-child{
background-color:red;
}
.groups .group:last-child:nth-child(3){
background-color:green;
}
.groups{
height:100px;
font-size:0;
line-height:0;
}
.groups .group{
display:inline-block;
height:100px;
width:30px;
}
http://jsfiddle.net/LAq73/3/
You are making it too complex.
Write:
.groups .group:first-child{ /*first child*/
background-color:yellow;
}
.groups .group:nth-child(2){ /*second child*/
background-color:red;
}
.groups .group:last-child{ /*last child*/
background-color:green;
}
Working fiddle here.