Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS even odd for every other odd div in class

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 :(

like image 852
Shawn Avatar asked Oct 07 '13 19:10

Shawn


People also ask

How do I target every other child CSS?

The :nth-child(odd) property will target every other item of the element you have selected.

How do I select the nth child in CSS?

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.


2 Answers

:nth-child(4n) gives us 0, 4, 8, etc.

Since you want 1, 5, 9, you should try :nth-child(4n + 1)

like image 81
luiscubal Avatar answered Oct 03 '22 06:10

luiscubal


What you want to do is apply the css to every fourth row, so you want to do:

.myClass:nth-child(4n+1)
like image 33
Douglas Grim Avatar answered Oct 03 '22 04:10

Douglas Grim