css - 擬似CSS、毎秒失敗するようです

Question

私はこのようなhtmlを持っています:

<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>

そして、毎秒「foo」の背景を青にし、他のfoo：sを赤にしたいと思います。

私が試してみました：

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

nht-of-type でもいくつかプレイしましたが、動作しません。上記のテストでは、すべてが青くなるため、すべて「奇数」です。

私は何を間違っていますか？

Answer 1

セレクターがnth-child間違った場所にありました：

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

jsFiddle の例

Answer 2

セレクターが少しずれています。

それらは親にある必要があります。

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