CSS descendant combinator Selector

Description

The CSS descendant combinator selector, which is represented by a single space character ( ), is used to select all elements that are descendants of a specified element. This means that the element can be a child, grandchild, great-grandchild, and so on, of the specified element.

To use the descendant combinator selector, simply place a space between the two selectors. For example, the following selector will select all p elements that are descendants of elements with the class container:

.container p {
  color: red;
}

This will style all p elements that are inside of .container elements, as well as all p elements that are inside of .container elements' children, grandchildren, and so on.

The descendant combinator selector is a very powerful tool for styling CSS elements. It allows you to style elements without having to worry about their exact position in the DOM tree. This can be especially useful for styling complex layouts.

Syntax

element element {
    css declarations;
}

Example

div p {
   color: #3366ff;
   background: #ffff99;
}

Give it a Try

Click the button below to experiment with this selector.

Give it a Try!

Browser Support

The following table will show you the current browser support for the CSS descendant combinator selector.

Desktop
Yes	Yes	Yes	Yes	Yes

Tablets / Mobile
Yes	Yes	Yes	Yes	Yes	Yes