article p matches every <p> element nested anywhere inside an <article> element, no matter how many levels of nesting separate them — a <p> directly inside the article, or one nested three divs deep within it, both match equally, since the descendant combinator, a plain space, doesn't care about the exact nesting depth, only that the matched element exists somewhere within the ancestor's full subtree. This makes descendant selectors useful for scoping styles to a specific section of a page, like nav a specifically targeting links inside a navigation element, without needing to add a class to every single matched descendant individually.
1Understanding Descendant Selectors
article p matches every <p> element nested anywhere inside an <article> element, no matter how many levels of nesting separate them — a <p> directly inside the article, or one nested three divs deep within it, both match equally, since the descendant combinator, a plain space, doesn't care about the exact nesting depth, only that the matched element exists somewhere within the ancestor's full subtree. This makes descendant selectors useful for scoping styles to a specific section of a page, like nav a specifically targeting links inside a navigation element, without needing to add a class to every single matched descendant individually.
Watch out for a descendant selector unintentionally matching deeply nested elements you didn't actually intend to target — since it matches at any depth, a selector like .sidebar p can accidentally style a <p> nested inside an unrelated widget that happens to also live inside the sidebar.
nav a {
color: white;
text-decoration: none;
}2Practical Example
Here is a real-world application of Descendant Selectors showing how it is used in production CSS code.
article p {
line-height: 1.8;
}
<article>
<div><p>Deeply nested paragraph</p></div>
</article>3Best Practices
Follow these guidelines when working with Descendant Selectors:
1. Use descendant selectors to scope styling to a specific section, like nav a or .sidebar h3, without needing to add a class to every individual matched element
2. Watch for unintentionally broad matches, since a descendant selector matches at any nesting depth, potentially including elements nested inside an unrelated component within that same ancestor
3. Prefer the child combinator (>) over the descendant combinator (space) specifically when you want to match only direct children, not deeper-nested descendants
Tip: Watch out for a descendant selector unintentionally matching deeply nested elements you didn't actually intend to target — since it matches at any depth, a selector like .sidebar p can accidentally style a <p> nested inside an unrelated widget that happens to also live inside the sidebar.
nav a {
color: white;
text-decoration: none;
}