Complex selector don't work in last blink version :nth-child(2):nth-last-child(2){}

Question

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. Any ideas how to fix it?

HTML

<div class="groups">
    <div class="group"></div>
    <div class="group"></div>
    <div class="group"></div>
</div>

CSS

.groups .group{
    background-color:#000;
}
.groups .group:first-child{
    background-color:yellow;
}
.groups .group:nth-child(2):nth-last-child(2),
.groups .group:nth-child(2):last-child{
    background-color:red;
}
.groups .group:last-child:nth-child(3){
    background-color:green;
}
.groups{
    font-size:0;
}
.groups .group{
    display:inline-block;
    height:100px;
    width:30px;    
}

You may see how it work here: http://jsfiddle.net/LAq73/1/

How it work in blink (chrome):

How it work in safari (webkit):

And finaly FF: How it work in gecko (FF)

Any ideas how to fix it?

Both Chrome 31.0.1650.57 and Canary 33.0.1726.0 work the same way as Gecko does, for me. What's the 'last blink version', I wonder? — raina77ow, Dec 02 '13 at 18:30

score 2 · Answer 1 · answered Dec 03 '13 at 12:14

2

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/

answered Dec 03 '13 at 12:14

SilentImp

1,473
1
14
27

So Blink inexplicably has trouble with `:nth-last-child()`. Can you test this workaround with http://stackoverflow.com/questions/20346681/using-nth-child-and-nth-last-child-simultaneously and see if it works as well? If it does, then it's probably the same issue, and one that only affects Chrome on the Mac. – BoltClock Dec 03 '13 at 12:24
Note of course that this only works if all elements are of the same type (in this case, it's `div`) - otherwise, you'd be SOL. – BoltClock Dec 03 '13 at 12:36

score -1 · Answer 2 · answered Dec 02 '13 at 18:30

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.

Complex selector don't work in last blink version :nth-child(2):nth-last-child(2){}

2 Answers2

Linked