CSS Portal

CSS Descendant Combinator Selector

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The descendant combinator selector allows you to target elements nested anywhere within a specific ancestor element. Unlike the child combinator, which only selects immediate children, the descendant combinator applies to all levels of nesting, no matter how deep the target element is within the ancestor. This makes it extremely versatile when styling elements within complex document structures.

For example, if you have a structure with a div containing multiple p elements, using the descendant combinator allows you to apply a single style rule to all p elements inside that div, regardless of whether they are nested directly or inside another container. This can help maintain consistent typography, spacing, or color schemes across related content sections.

The descendant combinator is often used in combination with other selectors to create highly specific targeting without adding extra classes or IDs. For instance, combining it with class selectors can target only certain nested elements, while still preserving the flexibility of applying styles at multiple levels of hierarchy. You can also influence how layout-related properties, like margin or padding, affect nested elements, giving you precise control over spacing within containers.

Overall, the descendant combinator is an essential part of writing maintainable CSS, especially in projects with deeply nested HTML structures. It simplifies styling nested elements without adding unnecessary markup or repetitive classes. For example, the rule

article p {
  color: darkblue;
}

will target every p inside any article, regardless of how deeply they are nested, making it a clean and powerful way to manage styles across complex documents.

Syntax

element element { css declarations; }

Example

<div class="container">
<p>I am inside the container (I will be blue).</p>

<section>
<p>I am deep inside a section (I will also be blue because I am a descendant).</p>
</section>
</div>

<p>I am outside the container (I will stay black).</p>
/* The descendant combinator is the space between the two selectors */
.container p {
color: blue;
font-weight: bold;
background-color: #f0f0f0;
padding: 5px;
}

Browser Support

The following information will show you the current browser support for the CSS Descendant Combinator selector. Hover over a browser icon to see the version that first introduced support for this selector.

This CSS descendant combinator selector is supported by all modern browsers.
Desktop
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 2nd January 2026

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!