Selector API - Descendant Selector
Table of Contents
About
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
Syntax
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
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