div p vs div>p

[speculumcm]

element element div p Selects all <p> elements inside <div> elements 1 element>element div>p Selects all <p> elements where the parent is a <div> element 2 So, what's the difference between this two selectors? Seems that inside and parent is the same isn't? Edited August 29, 2012 by speculumcm

[speculumcm]

Oh i see what is the difference!So if I have1.- <div> <header><h1>Lorem</h1> <p>Lorem ipsum...</p></header></div>2.- <div> <h1>Lorem</h1> <p>Lorem ipsum...</p></div>In CSSdiv p {color:red;} ORdiv > p {color:red;}The first CSS rule is going to set red to all <p> element inside the div so p in 1 and 2 are going tobe red but with the second rule just p in 2 is going tobe red!Now I see that inside and parent are not the same thing.

[Krewe]

To be more precise with what you stated Spec... div p{ } is going to effect EVERY paragraph tag inside div tags, wether or not the p tag is inside something else.(Ex. <div><span><p>The css will affect this</p></span><p>AND this</p></div>) div > p{ } is going to effect only div tags that are inside divs but NOT inside anything else. (Ex. <div><span><p>The css will NOT affect this</p></span><p>But it will affect this.</p></div>) ~krewe

Edited August 29, 2012 by Krewe

[ShadowMage]

The correct terminology is descendant and child. The descendant selector:div pwill, as mentioned, select all p elements located within the div including those nested in other elements within the div (ie, p elements that are descendants of the div) The child selector:div>pwill select only those p elements which are directly within the div and not nested within any other elements (ie, the children of the div)

[speculumcm]

Thanks a lot Krewe and ShadowMage, nothing better to get so good explanation. That's why this is the best w3c school