CSS descendant selector selects all the matching descendants of an element. The descendant selector is used when we want to style each and every element of a given type that is contained inside a given element. For example, all <p>
elements that are inside a <div>
element, or all <li>
elements that are inside a <ul>
element and so on.
To select the descendants of an element, put a white space between the parent and the descendant. For example, div p
, ul li
, etc.
In the example below, the descendant selector selects all the <p>
elements that are inside the <div>
element.
Example:
div p{ background: yellow; padding: 5px; border: 2px solid blue; }
In the example below, the descendant selector selects all the <li>
elements that are inside a <ul>
element. Try it out to see how it works:
Example:
ul li{ background: yellow; margin: 5px; }
CSS Descendant Selector Syntax
The descendant selector has the below syntax:
parent descendant{ CSS styles }
Related Pages
CSS Tutorial: CSS Selectors