The most recent update of Blink does not support the complex selector :nth-child(2):nth-last-child(2){}

Question

The most recent update of Blink does not support the complex selector :nth-child(2):nth-last-child(2){}

There is an unusual issue: after a recent update, the selector

.groups .group:nth-child(2):nth-last-child(2){}

suddenly stopped working. However, it still works perfectly in Webkit and Gecko browsers. Any thoughts on how to resolve this?

Snippet of HTML

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

CSS Code

.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 can view it in action here: http://jsfiddle.net/LAq73/1/

How it appears in Blink (Chrome)

How it looks in Safari (WebKit)

And finally, Firefox:

Any suggestions on how to resolve this issue?

css webkit css-selectors blink

Answer 1

Answer №1

Nth-last-of-type was the hero in this scenario, outshining nth-last-child.

.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/

Answer 2

Nth-last-of-type was the hero in this scenario, outshining nth-last-child.

.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/

Answer 3

Answer №2

You're overcomplicating it.

Here's a simpler version:

.elements .element:first-child{ /*first item*/
    background-color:yellow;
}
.elements .element:nth-child(2){ /*second item*/
    background-color:red;
}
.elements .element:last-child{ /*last item*/
    background-color:green;
}

See the working example here.

Answer 4

You're overcomplicating it.

Here's a simpler version:

.elements .element:first-child{ /*first item*/
    background-color:yellow;
}
.elements .element:nth-child(2){ /*second item*/
    background-color:red;
}
.elements .element:last-child{ /*last item*/
    background-color:green;
}

See the working example here.

The most recent update of Blink does not support the complex selector :nth-child(2):nth-last-child(2){}

Answer №1

Answer №2

Similar questions

How come certain invisible screen elements suddenly become visible when the document is printed?

The fluid table within the Bootstrap container is not adapting to different screen

Checking the Length using JQuery

Activate the CSS on a click event using the onClick method

Javascript code for scrolling to the top isn't functioning as expected

"Transforming a static navbar to a fixed position causes the page to jump

Toggle jQuery to hide a div and update its CSS styling

Having trouble aligning input elements in the middle of a div container

Tips for designing a horizontal sub-navigation menu using CSS?

challenge encountered while trying to remove ScrollTop feature on mobile gadgets

Permitting various valid responses for questions in a multiple-choice test | Utilizing Angular.js and JSON

Show flexibility in the grandchildren of a row layout

Having trouble with the CSS drop down menu in Internet Explorer 10?

At what point do browsers decide to round pixel fractions to whole pixels, and when do they choose not to do

Tips for defining the width of columns that adapt to different screen sizes in Bootstrap version 4

The Bootstrap CDN is malfunctioning and displaying errors in the console

What is the best way to display a single font in various sizes?

Discovering a hidden <div> element within an <a> tag using Selenium

Using PHP's modulus operator, you can dynamically apply CSS classes to a grid of images based on alternating patterns

The external Jquery file is being successfully loaded, however, the Jquery functions are failing to execute