Nth-child does not work with dynamically created DOM

Question

I'm having problems using nth-child in my CSS (currently in Chrome and Firefox). Parts of the DOM are generated dynamically on the client side using manipulation techniques using vanilla DOMs (document.createElement, document.appendChild, etc.).

Used CSS and generated DOM below:

CSS

#loginForm label { color: #FF0000 } #loginForm label:nth-child(1) { color: #8a8a8a; } 

DOM:

 <div id="loginForm"> <form> <label>Label 1</label> <label>Label 2</label> </form> </div> 

I tried putting this HTML and CSS in a JSFiddle and everything works fine, so I can only imagine that this has something to do with my DOM manipulation.

I noticed on the MDN page for nth-child that Opera cannot handle dynamic insertion of elements, but there is no mention of other browsers. Am I right in assuming that no browser can handle dynamic insertion and nth-child? If so, is there a workaround?

EDIT:

DOM embed code (the end line uses the target variable, which is passed to the function containing the code). Obviously there is more code, but these are the key parts:

 var contentHolder = document.createElement("div"); var form = document.createElement("form"); var userLabel = document.createElement("label"); form.appendChild(userLabel); contentHolder.appendChild(form); document.getElementById(target).appendChild(contentHolder); 

Answer 1

I assume you are looking for a selector :nth-child(2n+1) .

Example: http://jsfiddle.net/usScP/

You can also simplify this by using :nth-child(odd) or :nth-child(even) . Just using the :nth-child( number ) selector, you specifically access only this index in NodeList order.