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  gt  p   Whats the difference   Does a child mean immediate child   Eg    lt div gt  lt p gt    vs   lt div gt  lt div gt  lt p gt    will both be selected  or not

User · Accepted 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 · Answer

div  gt  p matches ps that have a div parent -  lt div gt  lt p gt  in your question div p matches ps that have a div ancestor  parent  grandparent  great grandparent  etc   -  lt div gt  lt p gt  and  lt div gt  lt div gt  lt p gt  in your question

User · Answer

Yes  you are correct  div p will match the following example  but div  gt  p will not    lt div gt  lt table gt  lt tr gt  lt td gt  lt p gt   lt        The first one is called descendant selector and the second one is called child selector

User · 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 · Answer

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

User · Answer

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 gt div gt div gt div last-child      background  red       lt div class  a  gt The first paragraph    lt div class  b  gt The second paragraph     lt div class  c  gt The third paragraph      lt div class  d  gt The fourth paragraph  lt  div gt      lt div class  e  gt The fourth paragraph  lt  div gt     lt  div gt    lt  div gt   lt  div gt

User · Answer

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    lt div class  one  gt     lt span gt Span 1       lt span gt Span 2  lt  span gt     lt  span gt   lt  div gt    lt div class  two  gt     lt span gt Span 1       lt span gt Span 2  lt  span gt     lt  span gt   lt  div gt    with this CSS   span   color  red     div one span   color  blue     div two  gt  span   color  green      http   jsfiddle net X343c 1

User · Answer

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 gt span background green    lt div gt  lt span gt abc lt  span gt  lt span gt def lt span gt ghi lt  span gt  lt  span gt  lt  div gt    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 gt span background green  div span background red    All letters will have red background  because descendant selector selects child s too

[css] CSS Child vs Descendant selectors

Examples related to css

Examples related to css-selectors