(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;
}

css3-selectors-1

: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;
}

css3-selectors-2

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

Join the Conversation

6 Comments

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.