Cascading Style Sheets: The Definitive Guide, Second Edition

Appendix B. Selector, Pseudo-Class, and Pseudo-Element Reference

Selectors

Universal Selector

This selector matches any element name in the document’s language. If a rule does not have an explicit selector, then the universal selector is inferred.

Pattern: *

Examples:

* {color: red;}
div * p {color: blue;}

Type Selector

This selector matches the name of an element in the document’s language. Every instance of the element name is matched. (CSS1 referred to these as element selectors.)

Pattern: element1

Examples:

body {background: #FFF;}
p {font-size: 1em;}

Descendant Selector

This allows the author to select an element based on its status as a descendant of another element. The matched element can be a child, grandchild, great-grandchild, etc., of the ancestor element. (CSS1 referred to these as contextual selectors.)

Pattern: element1 element2

Examples:

body h1 {font-size: 200%;}
table tr td div ul li {color: purple;}

Child Selector

This type of selector is used to match an element based on its status as a child of another element. This is more restrictive than a descendant element, since only a child will be matched.

Pattern: element1 > element2

Examples:

div > p {color: cyan;}
ul > li {font-weight: bold;}

Adjacent Sibling Selector

This allows the author to select an element that is the following adjacent sibling of another element. Any text between the two elements is ignored; only elements and their positions in the document tree are considered.

Pattern: element1 + element2

Examples: ...