CSS Descendant Selector

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, use a white space between the parent and the descendant. For example, div p, ul li, etc.

In the example below, the descendant selectors 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