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.

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

<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