html - all elements in class show as even -

On my webpage there is a DIV that is dynamically created with the class of Java. I want to change the color of every other movement of the class.

I am trying to do it this way:

  .JOUT: nth-child (even) {background: #EFF; } .jOUT: nth-child (Strange) {background: #cccffe; }  

My HTML is as follows:

  & lt; Div id = "outData" & gt; & Lt; Input type = "hidden" name = "outdiver" value = "-------" & gt; & Lt; Div class = "jOUT isOAAQU" & gt; & Lt ;! - ... - & gt; & Lt; / Div & gt; & Lt; Input type = "hidden" name = "outdiver" value = "-------" & gt; & Lt; Div class = "jOUT isOAAQU" & gt; & Lt ;! - ... - & gt; & Lt; / Div & gt; & Lt; Input type = "hidden" name = "outdiver" value = "-------" & gt; & Lt; Div class = "jouT" & gt; & Lt ;! - ... - & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

Full HTML

But it's not working What's really weird is that when using the console in Chrome, I select each jOUT , It shows them all as "even" attribute I'm sure I have an invalid CSS or HTML, but I can not find it. I am doing something, but what? I think what I am asking is, there is an idea of ​​place to start looking for this problem. I have validated the CSS using w3c CSS validation, and have used HTML using HTML teddy.

This will work here:

  .jOUT: nth-child (4n) {background: #EFF; }  

It is somewhat delicate, though. The better element is to add an optional style class on those elements, probably through your server-side app.