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.


Christian Kovats is a London-based web designer who loves crafting innovative and user-friendly interfaces. His passion for design is only rivaled by his love for nature and hiking, often drawing inspiration from his treks through the diverse landscapes of the UK. Outside of work, Christian enjoys spending quality time with his wife and 4-year-old son. A seasoned lucid dreamer, he also spends time exploring the intricate world of dream interpretation, reflecting his ever-curious and creative mind.


Leave a reply

You must be logged in to post a comment.