I have some divs in my HTML, a dynamic number of divs
How to select only divs 2,5,8,11 ?
I tried this :nth-child(2n+3)
but is not exactly what I need
Here's the code:
<!DOCTYPE html>
<html>
<head>
<style>
.a:nth-child(2n+3) { background:#ff0000; }
</style>
</head>
<body>
<p class="a">The first paragraph.</p>
<p class="a">The second paragraph.</p>
<p class="a">The third paragraph.</p>
<p class="a">The fourth paragraph.</p>
<p class="a">The fifth paragraph.</p>
<p class="a">The sixth paragraph.</p>
<p class="a">The seventh paragraph.</p>
<p class="a">The eight paragraph.</p>
<p class="a">The ninth paragraph.</p>
<p class="a">The seventh paragraph.</p>
<p class="a">The eight paragraph.</p>
<p class="a">The ninth paragraph.</p>
</body>
</html>
EDIT If Only 2,5,8,11 is needed then the answer would be:
p:nth-child(3n+2)
{
background: #ccc;
}
p:nth-child(3n+2),p:nth-child(3)
{
background: #ccc;
}
FIDDLE
I had to add p:nth-child(3) separately because it doesn't fit in the general pattern of +3 each time.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With