CSS Descendant Combinator Selector
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
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
Tablets & Mobile
Last updated by CSSPortal on: 2nd January 2026
