CSS Pocket Reference, 3rd Edition

Selectors

Universal Selector

Pattern:

*

Description:

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.

Examples:

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

Supported by:

All CSS-aware browsers.

Type Selector

Pattern:

element1

Description:

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.”)

Examples:

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

Supported by:

All CSS-aware browsers.

Descendant Selector

Pattern:

element1 element2

Description:

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.”)

Examples:

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

Supported by:

All CSS-aware browsers.

Child Selector

Pattern:

element1 > element2

Description:

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

Examples:

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

Supported by:

Firefox, Internet Explorer 7+ only, Opera, Safari.

Adjacent Sibling Selector

Pattern:

element1 + element2

Description:

This allows the author to ...