What Is a CSS Descendant Selector?

Understanding the CSS family tree

Laying out the text and content of a website with HTML code is only one ‘chunk’ of building the front end of a website. Another big chunk of this process is creating the visual style, which is governed by the rules of CSS.

Whenever we build a new website, or make major layout changes to an existing one, we inevitably want specific parts of our website to look a certain way. In order to do this, it’s important to understand how to use the various CSS combinators, such as the CSS descendant selector. This CSS combinator allows for large sections of a website to receive the same style changes at once.

What Is a CSS Descendant Selector?

The CSS descendant selector is one of four different CSS combinators. When adding a single space ( ) between two selectors, the same style elements will also apply to the second selector, given that the descendants share the same first selector.

In order to understand a CSS descendant selector, you first need to understand CSS selectors. The best way to describe a selector is that it’s a CSS operator which identifies the piece of HTML that you’re attempting to style. It’s called a selector because it “selects” whatever bit of HTML shares the same operator as the CSS parent.

Common examples of such operators are:

div

This is a tag that defines a section of HTML, which can include things like paragraphs and content, or:

li

which is an ordered list. Another similar tag is:

ul

This creates an unordered list. More complex patterns are also referred to as selectors. Put simply, a CSS descendant selector tells a website what to look like when one selector is ‘nested’ underneath a common ancestor.

The first selector becomes the CSS parent, or the ‘ancestor’ selector, and the second selector becomes the descendant. Think of how a file directory works: the CSS parent is like a folder that contains other folders, which can contain folders of their own.

Of the four combinators, the only one that selects everything that’s nested underneath a specific CSS parent is the CSS descendant selector. There are three other combinators

  • The child selector (‘>’ instead of single space) only selects elements referred to by the first selector in a combinator. If the first selector is (div) and the second selector is (p), only (p) is selected as long as it has (div) as an ancestor. If a paragraph is created under a new (section), even if it’s in the same (div), the style rules are not kept.
  • The adjacent sibling selector (‘+’ instead of single space) only selects the element that’s closest to the second selector in the combinator. If the first selector is (div) and the second selector is (p), the first element that uses (p) but not (div) is selected.
  • The general sibling selector (‘~’ instead of single space) selects every element except those referred to by the second selector. If the first selector is (div) and the second selector is (p), every element that’s not (p) is selected.

What Does a CSS Descendant Selector Look Like?

In the following example of two different CSS descendant selectors operating side-by-side, (div) is the first selector in the first combinator, whereas (ul) is the first selector in the second combinator. In both CSS descendant selectors, (p) is used as the second selector.

001_what_is_a_CSS_descendant_selector_4780518

The style elements differ between (div) and (ul), but (p) clearly carries the traits of its CSS parent in both instances.

Why Use a CSS Descendant Selector?

To understand the importance of the CSS descendant selector, it’s valuable to first understand CSS nested selectors.

We generally want certain style rules to apply to all of a website, such as the specific size or font that all paragraph (p) text uses by default. Likewise, HTML can start to look messy if those style rules are applied for each individual paragraph rather than for the entire website.

Nested CSS is possible through the use of CSS combinators such as the CSS descendant selector. By “nesting” CSS underneath a parent selector, it’s possible to quickly and efficiently tell a website what a specific selector is supposed to look like in every scenario that the CSS parent is referred to.

Using a nested CSS selector allows us to apply the same rules to style multiple sections of a site at one time, allowing us to get by with less work while also keeping our HTML clean and pristine.