The CSS :nth-child selector explained with examples
The CSS3:nth-child selector is a pseudo class used to select elements by a numeric expression. Lets take a look at how nth-child works.
The nth-child syntax
This is how the nth-child selector syntax looks like:
li:nth-child(expression); {}
In the parentheses it accepts number, odd and even and an expression.As :nth-child can be used to select a range of different elements under different circumstances, it’s difficult to explain how it works and what it’s for. We show this with some examples.
A simple expression
In the above syntax we could simply write:
li:nth-child(4); {}
Which means select the 4th list item from the list. Or select odd or even elements like this:
li:nth-child(odd); {} //selects odd list items
li:nth-child(even); {} //selects even list items
The an+b expression {#the-anb-expression}
Our expression could be an+b which means it will selects groups of a elements. b can be zero as well. Lets assume we want to select the list items above 5:
<span class="token selector">li<span class="token pseudo-class">:nth-child(n+6)</span> </span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token punctuation">}</span>
with replacing n by zero the first element it selects is six. With n being one, the second selected element is seven and etc.
Alternatively if we want to select only the first five elements we use a negative n:
<span class="token selector">li<span class="token pseudo-class">:nth-child(-n+5)</span> </span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token punctuation">}</span>
which starting n by zero selects the firs five list items.
Perhaps we need to select every nth element sometimes. Like every fifth element starting at the first element:
<span class="token selector">li<span class="token pseudo-class">:nth-child(5n-4)</span> </span><span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* or 5n+1 */</span> <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token punctuation">}</span>
Some more examples from MDN
tr:nth-child(odd) or tr:nth-child(2n+1)
Represents the odd rows of an HTML table: 1, 3, 5, etc.
tr:nth-child(even) or tr:nth-child(2n)
Selects the even rows of an HTML table: 2, 4, 6, etc.
p:nth-child(1) or p:nth-child(0n+1)
Represents every
that is the first element in a group of siblings. This is the same as the :first-child selector (and has the same specificity).
p:nth-child(n+8):nth-child(-n+15)
selects the eighth through the fifteenth
elements of a group of siblings.
:nth child best practices
Obviously do not overuse nth child when you can. Follow some best practices
-
Use :first-child and :last-child for first and last elements instead of nth-child.
-
Avoid weird and complex
nth-childexpressions
Check out this example to alternate table background colours:
/* do this and alternate colours by nth-child */
.data-table tr {
background: white;
}
.data-table tr:nth-child(even) {
background: lightgrey;
}
/* do not do this */
.data-table tr:nth-child(odd) {
background: white;
}
.data-table tr:nth-child(even) {
background: lightgrey;
}
You can check the :nth tester from CSS tricks to make you understand better and deeper here. You can also play around with this pen from CSS tricks as well. Thanks for reading.