How does JS DOM manipulation affect CSS rule matching?

Here is the setup: dynamically generates content for a number of items which need to be displayed together inside a single div. The layout is: An outer div (the container for everything), several inner divs (content varies), and a div inside each other inner div, along with some text.

The outermost div is part of the page from the beginning, and the js gets it by id. Next each inner div and its content are generated and then appended to the outer div. Rinse, repeat.

The outer div has a class that matches it in css. The inner div is matched as:

.outerdiv div{...

now... what actually happens is: both the inner div AND the content div match the outerdiv div rule, despite that one of t开发者_开发知识库hem is clearly (triple checked in an inspector, Firefox AND Chrome) a child of the inner div not the outer.

I have this in two separate places so I'm fairly sure I'm not crazy. Can somebody tell me how CSS rules are evaluated when DOM manipulations happen? (or where to go to find out?)

Thanks, -Conrad

The .outerdiv div selector selects any div within .outerdiv, not only direct children. To select a direct child of an element, there's the > selector (which is not supported by IE6 though).

As for the last question, CSS rules are always reevaluated, i.e. even when manipulating the DOM, elements will always be styled according to the CSS rules and don't "carry over" rules through DOM manipulation or anything like that.