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.

<div><p>

vs

<div><div><p>

will both be selected, or not?

I've tried to explain [here](http://stackoverflow.com/a/22632849/1542290) in detail, can refer just incase if its helpful to anyone... — Mr. Alien, Jun 19 '14 at 18:45

score 554 · Accepted Answer · answered Jul 25 '09 at 14:46

554

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.

answered Jul 25 '09 at 14:46

RichieHindle

272,464
47
358
399

60

One important note is that a child selector is going to be faster than descendant selector, which can have a visible affect on pages with 1000's of DOM elements. – Jake Wilson Mar 22 '12 at 17:37
Good answer, but I'd simply add on direct answers to his examples in the question as well -- just to make it ridiculously clear. – JoeCool Oct 10 '13 at 19:36

score 54 · Answer 2 · answered Jul 25 '09 at 14:31

54

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.

answered Jul 25 '09 at 14:31

Çağdaş Tekin

16,592
4
49
58

Ignas2526 · Answer 3 · 2013-12-24T11:36:48.267

28

Bascailly, "a b" selects all b's inside a, while "a>b" selects b's what are only children to the a, it will not select b what is child of b what is child of a.

This example illustrates the difference:

div span{background:red}
div>span{background:green}

<div><span>abc</span><span>def<span>ghi</span></span></div>

Background color of abc and def will be green, but ghi will have red background color.

IMPORTANT: If you change order of the rules to:

div>span{background:green}
div span{background:red}

All letters will have red background, because descendant selector selects child's too.

edited Dec 24 '13 at 11:36

answered Jan 23 '13 at 22:14

Ignas2526

532
7
12

The "Important" section that you added makes this answer complete. Thanks! – Aakash Verma Dec 12 '17 at 14:25

score 13 · Answer 4 · answered May 22 '14 at 22:52

13

In theory: Child => an immediate descendant of an ancestor (e.g. Joe and his father)

Descendant => any element that is descended from a particular ancestor (e.g. Joe and his great-great-grand-father)

In practice: try this HTML:

<div class="one">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

<div class="two">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

with this CSS:

span { color: red; } 
div.one span { color: blue; } 
div.two > span { color: green; }

http://jsfiddle.net/X343c/1/

answered May 22 '14 at 22:52

Snowcrash

80,579
89
266
376

Interesting on which browser you tested it, since it appear to work indeed – yoel halb Jun 02 '14 at 23:03
3

FYI, CSS in answer does not match with CSS in JSFiddle (`red` and `blue` swapped). – Pang Jun 05 '17 at 10:30

score 7 · Answer 5 · answered Jul 25 '09 at 14:53

7

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)

answered Jul 25 '09 at 14:53

rlovtang

4,860
2
30
30

i am thinking i use that in css. but in jquery i detect if browser is ie6 (in jquery can i do this? or do i need to use – iceangel89 Jul 26 '09 at 02:27
2

jquery do feature sniffing rather than browser sniffing so I don't think you can detect if browser is ie6. And you shouldn't. Best thing is to include an additional style sheet for ie6 with conditional comments like you described. – rlovtang Jul 26 '09 at 18:05

score 6 · Answer 6 · edited May 23 '22 at 11:43

6

div p

Selects all 'p' elements where at least one parent, grandparent etc. is a 'div' element

div > p

It means immediate children Selects all 'p' elements where the parent is a 'div' element

edited May 23 '22 at 11:43

Chris Johnson

20,650
6
81
80

answered Apr 09 '14 at 05:18

user3351229

97
1
2

score 1 · Answer 7 · answered Jun 26 '23 at 13:34

1

The difference between all selectors by visual DOM tree:

answered Jun 26 '23 at 13:34

Hemendr

673
6
12

score 0 · Answer 8 · answered Aug 10 '20 at 21:57

0

div > p matches ps that have a div parent - <div><p> in your question

div p matches ps that have a div ancestor (parent, grandparent, great grandparent, etc.) - <div><p> and <div><div><p> in your question

answered Aug 10 '20 at 21:57

user3071284

6,955
6
43
57

score -1 · Answer 9 · answered Jul 21 '16 at 07:01

CSS selection and applying style to a particular element can be done through traversing through the dom element [Example

Example

.a .b .c .d{
    background: #bdbdbd;
}
div>div>div>div:last-child{
    background: red;
}

<div class='a'>The first paragraph.
 <div class='b'>The second paragraph.
  <div class='c'>The third paragraph.
   <div class='d'>The fourth paragraph.</div>
   <div class='e'>The fourth paragraph.</div>
  </div>
 </div>
</div>

CSS Child vs Descendant selectors

9 Answers9

Linked

Related