Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Child vs Descendant selectors

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?

like image 490
iceangel89 Avatar asked Jul 25 '09 14:07

iceangel89


People also ask

What is the difference between CSS descendant selectors and CSS child selectors?

Descendant Selector :The descendant Selector selects all child elements of the selected parent element. In this example, the descendant selector selects all li of selected ul elements. 2. Direct Child Selector : This selector selects only the direct child of the selected element.

What is the difference between descendant and child?

Difference between Descendant and Child SelectorsDescendant selector is select child of child of so forth child element where else Child selector is only of that child of specific element.

What is a descendent selector in CSS?

The descendant selector is a way to select elements that are located somewhere underneath other elements, according to the tree structure of the webpage. This selector is actually multiple selectors combined together, but separated by a space.

What are child selectors in CSS?

The CSS child selector is used to select all child elements with a particular parent element.


1 Answers

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.
like image 97
RichieHindle Avatar answered Nov 07 '22 21:11

RichieHindle