Descendant combinator (space)

CSS course · Beginner · Lesson 13/82

Learn the space descendant combinator.

Descendant combinator: space

Place a single space between two selectors and you get the descendant combinator. It targets elements anywhere inside the element on the left, at any depth.

Write article p and every paragraph inside an article is selected — whether it is a direct child or buried ten levels deep. This is the most common way to reach elements inside a component.

Depth does not matter

The power of the descendant combinator is its indifference to depth. Inside a card component, whether a paragraph sits in a section, a div, or a blockquote, .card p catches them all.

This flexibility makes it ideal for typography across a theme. One line, hundreds of paragraphs. To touch only one level, return to the child combinator.

Exercise Give article paragraphs a line-height

Write an article p selector and add line-height: 1.6 inside. Every paragraph inside an article picks up this value, regardless of nesting depth.

Show example solution

/* style the article paragraphs */
article p {
  line-height: 1.6;
}

Test yourself

Which paragraphs does article p match?
```
article p {
  line-height: 1.6;
}
```
- All paragraphs inside article, at any depth
- Only paragraphs that are direct children of article
- Paragraphs at the same level as article
- Every paragraph on the page
Show answer

All paragraphs inside article, at any depth — Correct. The space combinator grabs every paragraph inside article.

Select every paragraph inside article

____ {
  line-height: 1.6;
}

Show answer

article p {
  line-height: 1.6;
}

Match each combinator to its target

article p

Paragraphs inside an article
nav a

Links inside a menu
card p

Paragraphs inside a card
footer a

Links inside a footer

Descendant combinator (space)