css selectors - Psuedo CSS, every second seems to fail -

i have html this:

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

and want every second "foo" have blue background, 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 played nht-of-type can't work. in test above "odd" since of them blue.

what doing wrong?

you had nth-child selector in wrong spot:

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

jsfiddle example