Psuedo CSS, every second seems to fail

Question

i have html like this:

<div class="container">
    <div class="foo">Foo!</div> <!-- if this is red... -->
    <div class="bar">Bar!</div>
</div>
<div class="container">
    <div class="foo">Foo!</div> <!-- ...i want this blue... -->
    <div class="bar">Bar!</div>
</div>
<div class="container">
    <div class="foo">Foo!</div> <!-- ...and this red. -->
    <div class="bar">Bar!</div>
</div>

and i want every second "foo" to have a blue background, the other foo:s red.

i have tried:

.container .foo:nth-child(odd)
{
    background-color: red;
}
.container .foo:nth-child(even)
{
    background-color: blue;
}

i have also played some with nht-of-type but i can't get it to work. In the test above they all are "odd" since all of them get blue.

What am i doing wrong?

Answer 1

You had your nth-child selector in the wrong spot:

.container:nth-child(odd) .foo
{
    background-color: red;
}
.container:nth-child(even) .foo
{
    background-color: blue;
}

jsFiddle example

Answer 2

Your selectors are a little off.

They should be on the parent.

.container:nth-child(odd) .foo
{
    background-color: red;
}
.container:nth-child(even) .foo
{
    background-color: blue;
}