Click to Rate and Give Feedback
MSDN
MSDN Library
Web Development
HTML and CSS
CSS Reference
Selectors
Combinators
 Descendant Combinator

  Switch on low bandwidth view
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 What's this?: Add a tag
Community Content   What is Community Content?
Add new content RSS  Annotations
How to select grandchildren?      John Sudds   |   Edit   |   Show History

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 What's this?: css (x) Add a tag
Flag as ContentBug
Processing
© 2009 Microsoft Corporation. All rights reserved. Terms of Use  |  Trademarks  |  Privacy Statement
Page view tracker