CSS Child vs Descendant selectors

Question

i am abit confused between these 2 selectors

div p

selects all p within a div whether or not its an immediate decedent? so if the p is inside another div it will still be selected?

then child selectors

div > p

whats the difference? does a child mean immediate child?

eg.

<div><p>

vs

<div><div><p>

both will be selected?

Answer 1

Yes, you are correct. div p will match the following example, but div > p will not.

<div><table><tr><td><p> <!...

The first one is called descendant selector and the second one is called child selector.

Answer 2

Just think of what the words "child" and "descendant" mean in English:

• My daughter is both my child and my descendant
• My granddaughter is not my child, but she is my descendant.

Answer 3

Be aware that the child selector is not supported in Internet Explorer 6. (If you use the selector in a jQuery/Prototype/YUI etc selector rather than in a style sheet it still works though)