I have divs in a horizontal row, all in the same class, like this:
1 2 3 4 5 6 7 8 9 10
What I want is to apply css to every other odd column, so 1,5,9, etc.
I've tried
.myClass:nth-child(n+4) and
.myClass:nth-child(odd),.myClass:nth-child(odd){
but can't figure it out :(
The :nth-child(odd) property will target every other item of the element you have selected.
The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
:nth-child(4n)
gives us 0, 4, 8, etc.
Since you want 1, 5, 9, you should try :nth-child(4n + 1)
What you want to do is apply the css to every fourth row, so you want to do:
.myClass:nth-child(4n+1)
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