Selector API - Descendant Selector

Chrome Devtool Selector


This page is about the selection of descendant in the selector API.

The descendant selector matches elements that are contained by (or “descended from”) another element.

A child is a direct descendant


The descendant relationship is shown with a space (or a * ?)

  • All descendant
/* All element descendant of E  */
E * 
/* All P descendant of E (ie all element P that are below E in the tree (child, little child, ....) */
E P 
/* or */
E * P  
  • First Descendant Level (child)
E >> P  


  • The HTML
     <p>This is the child element P of the root div and therefore a descendant of div. The style will be also applied on this text.</p>
          <p>This is a descendant of the root div. The style will be applied here.</p>
  • the CSS
div p { color:blue; }
div >> p { font-style:italic; } /* Work only on CSS4 */
body > div > p { font-size:2rem; }
  • The result

Recommended Pages
DOM - Event Delegation

Event delegation in the DOM
React Mapping Html Javascript
React - Styled Component

Styled component is a Css In Js solution. Utilising tagged template literals and the power of CSS, styled-components allows you to write actual CSS code to style your components. styled-components ...
Chrome Devtool Selector
Selector - Child Selector

A child selector is a selector that select child element in the DOM childdescendantdescendant selector A child selector matches when an element is the child of some element. A child selector is made...
Chrome Devtool Selector
Selector API

API A selector is a boolean expression (known also as predicate) that match against elements in a DOM tree in order to select one or several node. This API was known before as the CSS and was renamed...

Share this page:
Follow us:
Task Runner