Home >CSS >CSS reference – properties, selectors, functions >Descendant combinator (space)

Descendant combinator (space)

ancestor descendant

Two selectors separated by a space select elements matching the second selector that lie anywhere inside an element matching the first one – as children, grandchildren or deeper. The specificities of both parts add up (.article a has 0-1-1).

Examples

Links in the menu and in the article look different, even though they are the same a elements:

<nav class="menu"><a href="#">Home</a> <a href="#">Contact</a></nav>
<div class="article"><p>Text with a <a href="#">link</a> in an article.</p></div>

.menu {
  padding: 6px 10px;
  background: #01579b;
}
.menu a {
  color: #fff;
  text-decoration: none;
}
.article p { margin: 8px 0 0; }
.article a { color: #0088d1; }

result

Text with a link in an article.

The space selects at any depth – the items of the nested list get the blue line too:

<ul class="menu">
  <li>Products
    <ul>
      <li>Bikes</li>
      <li>Helmets</li>
    </ul>
  </li>
  <li>Contact</li>
</ul>

.menu,
.menu ul {
  margin: 0;
  padding-left: 16px;
  list-style: none;
}
.menu li {
  margin: 4px 0;
  padding-left: 6px;
  border-left: 3px solid #0088d1;
}

result

Products
- Bikes
- Helmets
Contact

Only the first-level items would be selected by the child combinator .menu > li.

Things to watch out for

The space selects at any depth – a rule for .menu li also hits the items of nested submenus. Only direct children are selected by .menu > li.
A space in a selector has a meaning: .a .b (an element .b inside .a) is not the same as .a.b (an element with both classes).
The ancestor is searched up to the root of the document: div p also selects a paragraph in a section if there is some div a few levels higher.
Long chains (body .page .content .article p a) increase specificity and tie the CSS to the structure of the HTML; after a change of the HTML they stop applying. Two levels or a class are usually enough.

Browser support

Baseline – widely available: works in all major browsers and has for a long time (since 2015 at the latest). Since version: Chrome 1, Firefox 1, Safari 1. As of October 2026 (MDN browser-compat-data).