Selects any instance of an element that is a descendant (child, grandchild and beyond) of another element.
Use a descendant combinator to select every instance of an element under its ancestor. Create a descendant combinator by adding a whitespace between two simple selectors. For example nav ul
will target every instance of an unordered list found inside of a navigation element.
For performance considerations, take care to not over-qualify selectors. For instance, html and body are unnecessary in the following example: html body article a {}
. It’s a given that an article will be found in the body which will be found in the html. There is no reason to require that the browser try to match any further than the article—as browsers read selectors from right to left.
The following rule defines a text color of red for all instances of unordered lists within navigation elements.
nav ul { color:red; }
Notes
Descendant combinators were called contextual selectors in Cascading Style Sheets, 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 {}
first second { ... }
Microsoft Developer Network: [Windows Internet Explorer API reference Article]
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4