(ab)using CSS3’s :nth-child() selector to invent new ones

When combining :nth-child() with some other pseudo selectors, one can actually create new types of selectors.

:nth-of-m-child” selector

 * This selector will select the third element in a row, 
 * if it is also the third to last element ... thus selecting
 * the 3rd child in a row of 5 elements
span:nth-child(3):nth-last-child(3) {
    background: red;


:family-of-m” selector:

 * The first selector will select the first span in a row, 
 * if it is also the fifth to last element ... the second
 * selector will select all successive spans. The combined
 * result is that all spans in a row of 5 will be selected
span:nth-child(1):nth-last-child(5), span:nth-child(1):nth-last-child(5) ~ span { 
    background: green;


(ab)using CSS3’s :nth-child() selector to invent new ones →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation


Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.