I have div elements like this
<div id="container">
<div id="content">
<div class="arrow"></div>
</div>
<div id="content">
<div class="arrow"></div>
</div>
<div id="content">
<div class="arrow"></div>
</div>
<div id="content">
<div class="arrow"></div>
</div>
</div>
I want to select the first-child but I have a css like this
#container #content:nth-child(odd) .arrow {
background: red;
}
#container #content:nth-child(even) .arrow {
background: green;
}
#container #content:first-child .arrow {
background: pink;
}
But then the first-child is color red because first child is an odd number.
I tried using this and I don't know if it's going to work and it didn't
#container #content:nth-child(odd):not(:first-child) .arrow {
background: red;
}
But then, the first div's arrow is still red.
What am I doing wrong?
:nth(odd)
is just a shortcut for :nth(2n+1)
, if memory serves, so I'd think :nth(2n+3)
might work.
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