CSS Child vs Descendant selectors

Question

I am a bit confused between these 2 selectors.

Does the descendent selector:

div p

select all p within a div whether or not it's an immediate descedent? So if the p is inside another div it will still be selected?

Then the child selector:

div > p

Whats the difference? Does a child mean immediate child? Eg.

vs

will both be selected, or not?

user_21886 · Answer

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.

user_52502 · Answer

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

 

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

user_141688 · Answer

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)

user_3071284 · Answer

div > p matches ps that have a div parent -

in your question

div p matches ps that have a div ancestor (parent, grandparent, great grandparent, etc.) -

and

in your question

CSS Child vs Descendant selectors

8 Answers