CSS3 :nth-child Pseudo March 18th, 2013

The CSS3 :nth-child pseudo selector can be used to add special rules to specific elements in a set, for example…

.myList li:nth-child(3n+3) {
    color: #ffffff;
}

…sets the color of every 3rd list item to red (3, 6, 9, …).  Specifying just a single number would only effect that element in the set…

.myList li:nth-child(5) {
    color: #ffffff;
}

…Colors only the 5th item.

Resources