Descendant Combinator
Specifies an arbitrary ancestral relationship between selector elements.

Syntax

HTMLE F { sRules }
ScriptingN/A

Possible Values

EString that specifies the name of a document language element type or simple selector.
FString that specifies the name of a document language element type or simple selector.
sRulesString that specifies one or more Cascading Style Sheets (CSS) attribute/value pairs.

Remarks

A descendant combinator is white space that separates two simple selectors. A selector of the form "E F" matches element F when it is an arbitrary descendant of some ancestor element E.

Note   Descendant combinators were called contextual selectors in Cascading Style Sheets (CSS), Level 1 (CSS1).

To skip over a generation of elements and pass styles to descendants beyond child elements, combine the Universal (*) Selector with the Descendant Combinator. For example, the following selector matches any P elements that are not direct descendants (grandchildren or later) of a DIV element.

DIV * P {}

Example

The following style rule applies only to LI elements within a DIV with a class of menu. Note that the selected elements do not have to be a direct descendant of the DIV tag.

<style>
    DIV.menu LI { font-size: x-small; }
</style>

Standards Information

This selector is defined in CSS, Level 2 (CSS2).

See Also

Tags :


Community Content

John Sudds
How to select grandchildren?

Yes, it is a corner case, but you can use the descendant combinator together with the Universal selector to skip over a generation of elements. The example given above (DIV * P) selects DIV-DIV-P and others, but not DIV-P. It is certainly not a common selector syntax, nor is it really the best way to achieve the same results. Consider it a curiosity.

Tags : css

Page view tracker