The '>' sign in the class definition

Question

How can I define children in an element with different styles?

#test > div[0] {
background:red;
}

#test > div[1] {
background:blue;
}

<div id="test">
<div>red bg</div>
<di>blue bg</div>
</div>

Answer 1

or use a structural pseudo-class:

#test > div:nth-child(n)

but not supported by IE or FF3

or even; (but not supported in IE6)

#test > div { background-color:#f00;}
#test > div + div { background-color:#0f0;}
#test > div + div + div { background-color:#00f;}
#test > div + div + div +  etc....

Answer 2

You can give these elements a class:

#test > .red {
    background-color: red;
}

#test > .blue {
    background-color: blue;
}

<div id="test">
    <div class="red">red bg</div>
    <div class="blue">blue bg</div>
</div>

But note that the child selector is not supported in IE6 .

Update: If you still want to support IE6, and these are only two elements that you want to apply styles to, you can simply omit >(and possibly give them the class identifier).

Answer 3

div, , .

, CSS3 , , .