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
