Style every third element?

Question

How can I style every third element with plain CSS.

I have seen questions like this, but they involve javascript. I want a plain CSS solution. I know I can use

Answer 1

IE Support via Libraries

If it is IE support you are looking for, there is a wonderful library called Selectivzr that enables CSS3 selectors on IE versions 6-8.

Hack that doesn't help IE, but is done without use of :nth-child

Otherwise all I can offer is an ugly hack using the + adjacent sibling selector (Defined by CSS2 standards, but not available by default in IE8 or below)

div {
    width: 40px;
    height: 40px;
    background-color: blue;
}

div + div,
div + div + div + div + div { width: 100px }

div + div + div + div,
div + div + div + div + div + div + div { width: 40px }

JSFiddle

This pattern could be generated with most CSS Precompilers (ie SASS), but is limited by the amount of elements you wish to have.

Conclusion

If all you're looking for is IE support; then I strongly recommend using a library such as Selectivzr. This will spare you some IE6-8 headaches.

If I have any epiphanies in regards to a better solution, I'll post.

Answer 2

With pure css this can be easily done. You can define CSS Selector and change the desired child property. For your case below is suitable.

section > div:nth-child(3n+1) {
    background: green;
}

How this work.

Pseudo-elements and pseudo-classes

Here above work like below

if n = 0 then 3*0 + 1 = 1
if n = 1 then 3*1 + 1 = 4
if n = 2 then 3*2 + 1 = 7
if n = 3 then 3*3 + 1 = 10
...........

If you want every 3rd element then your css looks like

section > div:nth-child(3n+3) {
    background: green;
}

Here above work like below

if n = 0 then 3*0 + 3 = 3
if n = 1 then 3*1 + 3 = 6
if n = 2 then 3*2 + 3 = 9
if n = 3 then 3*3 + 3 = 12
...........

Answer 3

Possible solution is

section div:nth-child(3n+1) {  
    color: #ccc;
}

The above code styles every 3rd element starting from first element as requested.
Change the number after '+ sign' to set the starting element.
Change the number before n charecter to set the elements after to be styled

Answer 4

you can use

.my-class:nth-child(odd) {}

or

.my-class:nth-child(2n+1) {}

Answer 5

section div:nth-child(3n+3) {  
    color: #ccc;
}

selected elements :

(3xn)+3 :
(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element
etc.

you can read it as follow :

(select all third element) starting at 3

here you have all what you need as DEMO

http://css-tricks.com/examples/nth-child-tester/

read more here http://css-tricks.com/useful-nth-child-recipies/

http://css-tricks.com/how-nth-child-works/

Select Only Odd or Even:

section div:nth-child(odd) {

}

section div:nth-child(even) {

    }

Select Only The First Five

div:nth-child(-n+5) {

}

Answer 6

section > div:nth-child(3n+1) {
    background:red;
}

This style is good for fixing your problem, but '>' this symbol, isn't supported for old browsers, for example: IE5, IE6, IE7 . . .

But I prefer this way, without '>' symbol

section div:nth-child(3n+1) {
    background:red;
}