Descendant Selector (CSS Selector)

Share this article

Description

The descendant selector matches all elements that are descendants of a specified element. The first simple selector within this selector represents the ancestor element—a structurally superior element, such as a parent element, or the parent of a parent element, and so on. The second simple selector represents the descendant element we’re trying to match.

The combinator we use in a descendant selector is a whitespace character: a space, horizontal tab, carriage return, line feed, or form feed. Since whitespace characters are allowed around all combinators, you can include more than one whitespace character between the simple selectors in a descendant selector.

Consider the following HTML fragment:

<ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Sub-item 2A</li>
      <li>Sub-item 2B</li>
    </ol>
  </li>
</ul>

We’ll try to match elements in the above fragment using the selector below:

ul li {
  ⋮ declarations
}

This descendant selector will match all four li elements in the example HTML, because each of those elements has a ul element as its ancestor.

We can also use descendant selectors to match the li elements within the ol in the example above:

ul * li {
  ⋮ declarations
}
ul * * li {
  ⋮ declarations
}
ul * ol li {
  ⋮ declarations
}
ul li * li {
  ⋮ declarations
}
ul ol li {
  ⋮ declarations
}
ul li li {
  ⋮ declarations
}
ul li ol li {
  ⋮ declarations
}

However, there’s no way we can use descendant selectors to match only the list items in the unordered list. To do that, we’d need a child selector.

Example

Take a look at this example of the descendant selector in action:

ul li {
  ⋮ declarations
}

This selector matches all li elements that are descendants of a ul element—that is, every li element that has a ul element as its ancestor.

Frequently Asked Questions (FAQs) about CSS Descendant Selectors

What is the difference between a descendant selector and a child selector in CSS?

In CSS, both descendant selectors and child selectors are used to select elements based on their relationship with other elements. However, they function differently. A descendant selector selects all elements that are descendants of a specified element. This means it selects all children, grandchildren, great-grandchildren, and so on. On the other hand, a child selector only selects direct children of a specified element and does not select any further descendants.

How can I use a descendant selector to style nested elements?

To style nested elements using a descendant selector, you need to specify the ancestor element followed by the descendant element, separated by a space. For example, if you want to style all paragraph elements that are descendants of a div element, you would write “div p { /* your styles here */ }”. This will apply the styles to all paragraph elements that are inside a div, no matter how deeply they are nested.

Can I use multiple descendant selectors in a single rule?

Yes, you can use multiple descendant selectors in a single rule. This is useful when you want to style elements that are descendants of more than one type of element. For example, “div p, ul li { /* your styles here */ }” will apply the styles to both paragraph elements inside divs and list items inside unordered lists.

What is the specificity of a descendant selector?

The specificity of a CSS rule is a measure of how important it is. It determines which rule will be applied when there are conflicting rules. The specificity of a descendant selector is equal to the sum of the specificities of its component selectors. For example, the specificity of “div p” is 2, because it consists of two type selectors.

Can I use pseudo-classes with descendant selectors?

Yes, you can use pseudo-classes with descendant selectors. This allows you to select elements based on their state or position in the document. For example, “div p:first-child { /* your styles here */ }” will select the first paragraph element that is a child of a div.

How does the cascade affect descendant selectors?

The cascade is the process by which CSS determines which rules to apply to an element. Rules that are later in the stylesheet or that have higher specificity will override earlier or less specific rules. This means that if you have conflicting rules for a descendant selector, the one that is later or more specific will be applied.

Can I use descendant selectors with attribute selectors?

Yes, you can use descendant selectors with attribute selectors. This allows you to select elements based on their attributes as well as their position in the document. For example, “div p[class=’highlight’] { /* your styles here */ }” will select paragraph elements with the class “highlight” that are descendants of a div.

How can I use descendant selectors to style tables?

You can use descendant selectors to style tables by selecting table rows, cells, headers, and other elements based on their relationship with the table element. For example, “table tr:nth-child(even) { /* your styles here */ }” will select every even row in a table.

Can I use descendant selectors with the universal selector?

Yes, you can use descendant selectors with the universal selector. The universal selector matches any element, so it can be used to select all descendants of a specified element. For example, “div * { /* your styles here */ }” will select all elements that are descendants of a div.

How can I use descendant selectors to style forms?

You can use descendant selectors to style forms by selecting form elements based on their relationship with the form element. For example, “form input[type=’text’] { /* your styles here */ }” will select all text input fields in a form.

Adam RobertsAdam Roberts
View Author

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week