The descendant combinator is whitespace (usually a space) between two selectors. It matches elements selected by the second selector that have an ancestor matching the first — at any depth.
Example: .box p styles every p inside .box, including nested ones. Prefer the child combinator (>) when you need only direct children. Read selectors right to left: the rightmost part is what you style.
Not deprecated. Core CSS since CSS1. Extremely broad support across browsers.
ancestor descendant { /* declarations */ }The combinator is whitespace (usually one space) between the two selectors. Examples: nav a · .box p · li li · div span
Name the ancestor, leave a space, then name what you want to style.
.card p) over a bare type when possible.| Piece | Required? | Role |
|---|---|---|
| Ancestor selector | Yes | Limits the search tree |
| Whitespace | Yes | The descendant combinator |
| Descendant selector | Yes | What actually receives the styles |
| Depth | — | Any nesting level matches |
Switch between .demo p (all nested paragraphs) and .demo > p (direct children only). Highlighted text shows what matches.
Each snippet focuses on the descendant space combinator. Use Try It Yourself for a live editor.
Style only paragraphs inside a container.
<style>
.box p {
color: #dc2626;
}
</style>
<div class="box">
<p>Inside the box</p>
</div>
<p>Outside the box</p>.box limits where we look.p elements get the red color..box.Style list items that sit inside other list items.
<style>
li {
list-style-type: disc;
}
li li {
list-style-type: circle;
}
</style>
<ul>
<li>Item
<ul>
<li>Subitem</li>
</ul>
</li>
</ul>li use disc bullets.li li means an li inside another li.Style anchors only when they live under navigation.
<style>
nav a {
color: #1d4ed8;
text-decoration: none;
font-weight: 600;
}
</style>
<nav>
<a href="#">Home</a>
<a href="#">Docs</a>
</nav>
<p><a href="#">Footer link</a></p>nav scopes the rule.a. Any link under that nav matches.nav.a. Avoids restyling every link on the page.If too many elements light up, check these first.
div p matches deep nests. div > p matches only direct children. Use > when depth must be exact.
div span can hit far more than you intend. Prefer a classed container like .card span.
a.button (no space) is one element with both conditions. a .button (space) is a descendant with class button.
.nav a is more specific than bare a. Long chains can become hard to override — keep them short.
The browser finds candidates for the rightmost selector, then checks ancestors. Mentally: “style these, but only under that.”
The descendant combinator is a browser CSS selector. Node.js, Deno, and Bun do not apply it.
Supported everywhere CSS is supported (CSS1-era). Safe for all teaching and production use.
Bottom line: No prefixes. No polyfills. It is not a runtime API.
One line: a space means “somewhere inside” — style the right side, limited by the left ancestor.
Learn how comma-separated selector lists share the same declarations.
8 people found this page helpful