CSS Child vs Descendant selectors

css css-selectors
iceangel89 picture iceangel89 · Jul 25, 2009 · Viewed 122k times · Source

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.

<div><p>

vs

<div><div><p>

will both be selected, or not?

Answer

RichieHindle picture RichieHindle · Jul 25, 2009

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.

Related questions

Is there a CSS parent selector?

How do I select the <li> element that is a direct parent of the anchor element? As an example, my CSS would be something like this: li < a.active { property: value; } Obviously there are ways of doing …

Read More
CSS selector for first element with class

I have a bunch of elements with a class name red, but I can't seem to select the first element with the class="red" using the following CSS rule: What is wrong in this selector and how do I correct …

Read More
not:first-child selector

I have a div tag containing several ul tags. I'm able to set CSS properties for the first ul tag only: div ul:first-child { background-color: #900; } However, my following attempts to set CSS properties for each other ul tag except the …

Read More