Selector API - Descendant Selector

> (World Wide) Web - (W3|WWW) > Selector API

1 - About

Tree - 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

Advertising

3 - Syntax

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

  • All descendant
/* 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  

4 - Example

  • The HTML
<div>
     <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>
     <div>
          <p>This is a descendant of the root div. The style will be applied here.</p>
     </div>
</div>
  • the CSS
div p { color:blue; }
div >> p { font-style:italic; } /* Work only on CSS4 */
body > div > p { font-size:2rem; }
  • The result

web/selector/descendant.txt · Last modified: 2019/04/06 11:32 by gerardnico