Skip to main content
Home / Articles /

Abusing CSS3’s nth-child selector to invent new ones

Direct Link →

Matt Mastracci on combining existing positional selectors in interesting ways to create logic you might not have thought possible. For instance, select all elements only if there are five of them, with:

span:first-child:nth-last-child(5),
span:first-child:nth-last-child(5) ~ span { 
  /* select the span if its BOTH first and 5th from the end, then all spans after it. */
}

The usefulness lies in applying special layout to accommodate unknown markup.

Reminds me of an old CSS parlor trick I saw Estelle Weyl did where she sized columns perfectly without knowing how many there would be.

icon-link icon-logo-star icon-search icon-star