CSS Descendant Selector

A descendant selector is two selectors separated by a space. It matches the second one only when it sits somewhere inside the first, at any depth.

1
2
3
4
5
6
7
8
9
10
11
12
13

<style>
  nav a {
    color: #1a5276;
    text-decoration: none;
    margin-right: 12px;
  }
</style>
<nav>
  <a href="#">Home</a>
  <a href="#">Shop</a>
  <ul><li><a href="#">Nested link</a></li></ul>
</nav>
<p><a href="#">A link outside the nav</a></p>

nav a styles all links inside the nav, including the one in the nested list. The link in the paragraph is untouched.

Children, grandchildren and deeper

“Descendant” means any level below. In div p, the paragraph can be a child of the div, or inside a section inside an article inside the div.

You can chain more than two parts: .card ul li a means “a link in a list item in a list in a card”.

Don’t chain too far

Long selectors are fragile. If you change the HTML structure, the rule stops matching, and it becomes hard to override. Two parts are usually enough.

If you want only direct children and not deeper ones, see CSS Child Selector.