Selector API - Descendant Selector

Chrome Devtool Selector

Selector API - Descendant 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

Discover More
DOM - Event Delegation

Event delegation in the DOM
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