New and more broadly supported CSS3 selector pseudo-classes make it possible to match elements based on their numerical position within a parent element.
The World Wide Web Consortium's (W3C) CSS3 Selector recommendation includes several pseudo-classes. For this article, I want to consider the nth-child pseudo-class, which will, as described above, allow web developers to select child elements based on position.
Why the nth-child Selector Is Useful
A practical application might be found in the product review section of an ecommerce website. Imagine that you want to alternate the background color of all of the odd numbered product reviews to make the page easier to read.
This is an effect that appears on many sites already, but these sites are typically using a server-side scripting language like PHP or Ruby to place a class of "odd" or "even" on the appropriate rows. The CSS selector used might be .odd or .even.
<ul> <li class="odd">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li> <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li> <li class="odd">Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li> <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li> </ul>
.odd {background: #4C4938; color: #EFF2D9}
With the nth-child the additional HTML markup is not required.
<ul> <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li> <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li> <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li> <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li> </ul>
li:nth-child(odd) {background: #4C4938; color: #EFF2D9}
Other applications might include varying the background images around product images on a product category page, alternating spacing in mega-menus, or styling page comments.
What Is nth-child and How Does it Work?
In CSS3, the nth-child pseudo-class accepts the keywords "odd" or "even," a number, or an equation in the form an+b.
Element:nth-child(odd / even / number / equation)
The keywords behave just as you would expect. Specifying "odd" adds the subsequent style declaration to the odd numbered children of the element's parent. So the style description below adds a background declaration and color declaration to odd number list items.
li:nth-child(odd) {background: #4C4938; color: #EFF2D9}
Specifying a particular number would result in only a single child element—the one in that numerical position—being affected by the style description.
li:nth-child(3) {background: #4C4938; color: #EFF2D9}
If an equation is specified for the nth-child's parameter, that equation should take the form of some number times n.
li:nth-child(2n) {background: #4C4938; color: #EFF2D9}
In algebraic expressions, n can stand for "natural numbers" and is used to represent a series of numbers like 1,2,3,4,5,6, etc. So writing 5n could represent not just one equation, but also a series of them.
5 x 1 = 1
5 x 2 = 10
5 x 3 = 15
5 x 4 = 20
5 x 5 = 25
This is how the 2n in the style description below is used.
li:nth-child(2n) {background: #4C4938; color: #EFF2D9}
The style declaration is applied to the child elements at position 2 and position 4 since:
2 x 1 = 2
2 x 2 = 4
If there had been ten product reviews (list items), the nth-child pseudo class would have applied to all of the even numbered rows.
2 x 1 = 2
2 x 2 = 4
2 x 3 = 6
2 x 4 = 8
2 x 5 = 10
If I want my style declaration to only apply to every forth element—4, 8, 12, 16, etc.—I could write 4n since:
4 x 1 = 4
4 x 2 = 8
4 x 3 = 12
4 x 4 = 16
li:nth-child(4n) {background: #4C4938; color: #EFF2D9}
For more complex selections, I can add or subtract from the result of some number times n. For example 7n-3 will affect the 4th, 11th, 18th, etc. children since:
(7 x 1) – 3 = 4
(7 x 2) – 3 = 11
(7 x 3) – 3 = 18
Summing Up
The nth-child pseudo-class is a very simple and effective way to single out particular child elements or affect groups based on numerical position. It is useful, for example, when you need to change the style for just one item in a list.
At the time of writing, this CSS3 selector was supported in Firefox, Opera, Chrome, Safari, Flock, and Internet Explorer 9.
Related Articles
- CSS Media Queries For Mobile Designs
- Building Pure CSS Mega Menus
- Three Techniques for Cross-Browser CSS Gradients
