Select every odd item starting from the 5th place
If I wanted to select every fourth element starting from the 5th place, I would do:
.elem:nth-child(4n+5) {
//something
}
But how do you do this for every odd element starting from the 5th place? This syntax doesn't work:
.elem:nth-child(:oddn+5) {
//something
}
+3
TK123
source
to share
2 answers
you can use .elem:nth-child(2n+5)
li:nth-child(2n+5) {
color: red
}
<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>
<li>item</li>
</ol>
2n
will select every other element and +5
will act as an offset. So when n
starting at zero you get 5, 7, 9, 11, ...
+5
j08691
source
to share
you can use
-
:nth-child(odd)
to select every odd item -
:not(:nth-child(-n + 4))
to not select the first 4 elements
div:not(:nth-child(-n + 4)):nth-child(odd) {
background: red;
}
<div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div>
Or if you want to start from the 5th item you can go to this
div:not(:nth-child(-n + 5)):nth-child(even) {
background: red;
}
<div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div>
+2
Nenad Vracar
source
to share