CSS : Child Selector and Descendant Selector

  • Article

Say, You have a large HTML document with multiple <P> tags and nested <Strong> tags, a new requirement comes that in <P> tags all the <strong> tags that are direct child of <p> should have Green color and all other <strong> tags that are not direct child but descendant should have Red color.

You might like to use child and Descendant selectors for handling such situations.

Before IE-7, Child Selector was not supported in IE. And for IE to recognize the chile selector you should provide Doctype declaration in your page else IE7+ would render the page in quirks mode and child slector would be ingnored.

Descendant Selector:

  • Specifies elements by ancestry
  • If Child selector is specified after the Descendant Selector, then Descendant Selector would affect all the Children but not the direct children.
  • If Child selector is not specified or specified before the descendant Selector, then it would affect the direct children too.

Each "generation" is separated by a space. For example, the following rule states that <strong> tags within <p> tags should have green text.

 p strong
 {
 color : Red;
 }

With descendant selectors generations can be skipped. In other words, the code above does not require that the <strong> tag is a direct child of the <p> tag.

 

Child Selectors:

A child is the direct descendant of a node/tag in CSS or in other words direct Parent-Child relationship.

 p > strong 
 {
 color: red;
 }

In this case only <strong> tags that are direct children of <p> tags are affected.

Note the use of “>” to specify the Parent – Child relationship.

 

Note: If you want proper effect, first specify the Descendant Selector and then Child Selector. If you reverse the order i.e. first Specify Child Selector and then Descendant Selector,

in this scenario Child Selector would not be applied as Descendant Selector will override the Child Selector.

Consider Child Selector as a one more layer of Specialization over the Descendant Selector hence it should be written after the Descendant Selector.

For Child selector to be recognised by IE7+ do put Doctype declaration in your page else it would be ignored as IE7+ would render the page in quirks mode.

 

HTMLPage1.htm