CSS Descendant Selector

Using descendant selectors you can target an element or elements that are contained within other elements.

The basic syntax is

element1 element2 ... { style_properties }

We divide each element with a space.

In the following example we set the text color of each span element that are inside a paragraph tag.

p span {
   color: red;
}

We can go more than 2 levels deep with descendant selectors. Check the following code:

ul li a {
   color: blue;
}

We set the link text color to blue inside an unordered list item. It will not affect the link color outside the unordered list.