Select every Nth element in CSS
CssCss SelectorsCss Problem Overview
Is it possible to select, say, every fourth element in a set of elements?
Ex: I have 16 <div>
elements... I could write something like.
div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)
is there a better way to do this?
Css Solutions
Solution 1 - Css
As the name implies, :nth-child()
allows you to construct an arithmetic expression using the n
variable in addition to constant numbers. You can perform addition (+
), subtraction (-
) and coefficient multiplication (an
where a
is an integer, including positive numbers, negative numbers and zero).
Here's how you would rewrite the above selector list:
div:nth-child(4n)
For an explanation on how these arithmetic expressions work, see my answer to this question, as well as the spec.
Note that this answer assumes that all of the child elements within the same parent element are of the same element type, div
. If you have any other elements of different types such as h1
or p
, you will need to use :nth-of-type()
instead of :nth-child()
to ensure you only count div
elements:
<body>
<h1></h1>
<div>1</div> <div>2</div>
<div>3</div> <div>4</div>
<h2></h2>
<div>5</div> <div>6</div>
<div>7</div> <div>8</div>
<h2></h2>
<div>9</div> <div>10</div>
<div>11</div> <div>12</div>
<h2></h2>
<div>13</div> <div>14</div>
<div>15</div> <div>16</div>
</body>
For everything else (classes, attributes, or any combination of these), where you're looking for the nth child that matches an arbitrary selector, you will not be able to do this with a pure CSS selector. See my answer to this question.
By the way, there's not much of a difference between 4n and 4n + 4 with regards to :nth-child()
. If you use the n
variable, it starts counting at 0. This is what each selector would match:
:nth-child(4n)
4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...
:nth-child(4n+4)
4(0) + 4 = 0 + 4 = 4
4(1) + 4 = 4 + 4 = 8
4(2) + 4 = 8 + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...
As you can see, both selectors will match the same elements as above. In this case, there is no difference.
Solution 2 - Css
div:nth-child(4n+4)
Solution 3 - Css
You need the correct argument for the nth-child
pseudo class.
-
The argument should be in the form of
an + b
to match every ath child starting from b. -
Both
a
andb
are optional integers and both can be zero or negative.- If
a
is zero then there is no "every ath child" clause. - If
a
is negative then matching is done backwards starting fromb
. - If
b
is zero or negative then it is possible to write equivalent expression using positiveb
e.g.4n+0
is same as4n+4
. Likewise4n-1
is same as4n+3
.
- If
Examples:
###Select every 4th child (4, 8, 12, ...)
li:nth-child(4n) {
background: yellow;
}
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
###Select every 4th child starting from 1 (1, 5, 9, ...)
li:nth-child(4n+1) {
background: yellow;
}
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
###Select every 3rd and 4th child from groups of 4 (3 and 4, 7 and 8, 11 and 12, ...)
/* two selectors are required */
li:nth-child(4n+3),
li:nth-child(4n+4) {
background: yellow;
}
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
###Select first 4 items (4, 3, 2, 1)
/* when a is negative then matching is done backwards */
li:nth-child(-n+4) {
background: yellow;
}
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
Solution 4 - Css
Try this
div:nth-child(4n+4)