How to get alternate colors div with pure css and with 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 alternate div without adding class or id .

Is it possible with CSS only (no Javascript) with IE 7 support

Answer 1

IE7 doesn't support the selector you would require, which is :nth-child().

Generally you would 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 every odd or even row (perhaps using a server side language).

Answer 2

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

Well kind of, with the 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 that means writing out a rule (of increasingly unwieldy length) for each child. The above covers the example markup with four children, so it's manageable for short, fixed-number-of-children elements, but impractical for elements with a large or unlimited number of children.