How to get alternative div colors with pure css and IE 7 support?

Question

This is HTML.

<div class="container"> <div> background of this i need in white </div> <div> background of this i need in red </div> <div> background of this i need in white </div> <div> background of this i need in red </div> </div> 

I want to select an alternative div without adding a class or id.

Is this possible with CSS (without Javascript) with IE 7 support

Answer 1

IE7 does not support the required selector, which is :nth-child() .

Usually you use

 .container div:nth-child(even) { background: red; } 

IE7 does not support it , unfortunately.

You will need to use JavaScript or add a class to each odd or even line (possibly using a server-side language).

Answer 2

can't we select every second div inside <div class="container"> [with CSS2 selectors introduced by IE7]?

Ok, with adjacency selector:

 .container div { background: white; } .container div+div { background: red; } .container div+div+div { background: white; } .container div+div+div+div { background: red; } 

But this means writing out a rule (of increasingly cumbersome length) for each child. The above example includes markup with four children, so it is manageable for short elements with a fixed number of children, but impractical for elements with a large or unlimited number of children.

Answer 3

This is impossible to do.

Answer 4

Use style tags in style, for example, the following works in IE 7 not verified for others.

 <div style="background-color:#ffff00" > Hello YOU div</div> 

Answer 5

 div:nth-child(odd) { background-color:#ffffff; } div:nth-child(even) { background-color:#ff0000; } 

but I don’t know (and cannot verify) if this works in IE7 - if not, you will have to use different classes for the div.