Home > Web Design | Web Development > Abusing CSS3’s nth-child selector to invent new ones

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

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 to ArticlePermalink


Abusing CSS3’s nth-child selector to invent new ones is a post from CSS-Tricks

TOP
Visit Us On TwitterVisit Us On FacebookVisit Us On Google PlusVisit Us On Linkedin