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

Avatar of Chris Coyier
Chris Coyier on

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.

Direct Link →