CSS combinatorSelectors

A B

A space between selectors selects B elements anywhere inside element A, at any depth.

On this page

Example
Definition and usage
Syntax
Example selectors
Example selectors in practice
More examples
Browser support
Good practices
Related entries

Example

CSS

nav a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

footer a {
  color: #a1a1aa;
  font-size: 13px;
}

Preview

Definition and usage

The descendant combinator is just a plain space between two selectors. The notation nav a means: every link that lies inside nav, whether it’s a child, a grandchild, or nested even deeper.

Thanks to it, a style depends on its context. The same link can look different in the navigation (nav a) and different in the footer (footer a), with no classes added to every link. Specificity adds up across every part: nav a has (0, 0, 2), and .menu a has (0, 1, 1).

It’s easy to overdo the length. A chain like .sidebar .menu ul li a is brittle: it breaks with every change to the HTML structure and carries a high weight that’s hard to override. Two levels are usually enough, and a class on the element itself takes care of the rest.

Browsers evaluate a selector like this from the right: they first find the B elements, then look among their ancestors for element A. If you want to select only direct children, use the > combinator.

Syntax

A B { property: value; }

Example selectors

.demo span
All three span elements in the box, at any depth. The element outside .demo stays gray.
.lvl span
Every span inside any .lvl, meaning the grandchild and the great-grandchild. The child lies outside them.
.lvl .lvl span
Only a span inside a .lvl that itself lies inside another .lvl. Only the great-grandchild is left.
div span
The .demo box is also a div element, so even the child matches. Every ancestor counts, not just the nearest one.

Selector	Description
.demo span	All three `span` elements in the box, at any depth. The element outside `.demo` stays gray.
.lvl span	Every `span` inside any `.lvl`, meaning the grandchild and the great-grandchild. The child lies outside them.
.lvl .lvl span	Only a `span` inside a `.lvl` that itself lies inside another `.lvl`. Only the great-grandchild is left.
div span	The `.demo` box is also a `div` element, so even the child matches. Every ancestor counts, not just the nearest one.

Example selectors in practice

.demo span

All three span elements in the box, at any depth. The element outside .demo stays gray.

.demo span { background: #7c3aed; color: #fff; }

.lvl span

Every span inside any .lvl, meaning the grandchild and the great-grandchild. The child lies outside them.

.lvl span { background: #7c3aed; color: #fff; }

.lvl .lvl span

Only a span inside a .lvl that itself lies inside another .lvl. Only the great-grandchild is left.

.lvl .lvl span { background: #7c3aed; color: #fff; }

div span

The .demo box is also a div element, so even the child matches. Every ancestor counts, not just the nearest one.

div span { background: #7c3aed; color: #fff; }

More examples

Content with no classes, like an article from Markdown

CSS

.prose h3 {
  margin: 0 0 6px;
  color: #c4b5fd;
}

.prose p {
  margin: 0 0 8px;
}

.prose code {
  padding: 1px 6px;
  border-radius: 6px;
  background: #27272a;
  font-size: 13px;
}

Example HTML

<article class="prose stage">
  <h3>What is a selector?</h3>
  <p>A selector points to the elements that should get a style, for example <code>p</code> or <code>.card</code>.</p>
  <p>This content could come from Markdown, so there are no classes inside it.</p>
</article>

Preview

Only the container has a class. Everything inside is styled through context, with no classes added to each element.

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

Keep selectors short: two or three levels at most. A longer chain usually means the element could use a class of its own.
The descendant combinator works great for content you don’t control, such as articles from Markdown: .prose a, .prose ul.
When a style should only apply to the first level of nesting, for example in a menu with a submenu, swap the space for >.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course