Descendant selectors

Summary

A descendant combinator — typically represented by a single space ( ) character in the form of selector₁ selector₂ — combines two selectors such that elements matched by the second selector (selector₂) are selected if they have an ancestor element matching the first selector (selector₁). Selectors that utilize a descendant combinator are called descendant selectors.

The descendant combinator is technically one or more CSS white space characters — the space character and/or one of four control characters: carriage return, form feed, new line, and tab characters — between two selectors in the absence of another combinator. Additionally, the white space characters of which the combinator is comprised may contain any number of CSS comments.

The abstract nature of this combinator makes it different from the other three standardized combinators — the adjacent/next‐sibling combinator represented by a plus sign (+) character, the child combinator represented by a greater‐than sign (>) character, and the following‐sibling combinator represented by a tilde (~) character — as these combinators are all represented by a distinct, finite character sequence. Current drafts of the CSS Selectors, Level 4 specification attempt to address this inconsistency with the addition of a redundant descendant combinator represented by two greater‐than sign characters in sequence (>>), giving it a form that is particularly similar to the child combinator, which shares a similar function. However, this new form of the descendant combinator is not yet implemented in any major browser, including Mozilla Firefox.

Syntax

selector₁ selector₂ { /* property declarations */ }

The dual purpose of CSS white space as both the descendant combinator and a code‐organizing aid can make some descendant selectors particularly confusing:

selector₁ /* comment */ selector₂ { /* property declarations */ }

selector₁
selector₂ { /* property declarations */ }

A proposal in the CSS Selectors, Level 4 specification gives the descendant combinator a second, less‐abstract form that looks similar to the child combinator:

selector₁ >> selector₂ { /* property declarations */ }

Example

li { list-style-type: disc; }
li li { list-style-type: circle; }

<ul>
	<li>
		<div>Item 1</div>
		<ul>
			<li>Subitem A</li>
			<li>Subitem B</li>
		</ul>
	</li>
	<li>
		<div>Item 2</div>
		<ul>
			<li>Subitem A</li>
			<li>Subitem B</li>
		</ul>
	</li>
</ul>

Specifications

Browser compatibility