CSS Cookbook, 3rd Edition

Appendix C. CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements

This appendix contains three reference tables that can help you learn how to apply styles to the correct elements.

Table C-1 contains the CSS 2.1 selectors. Selectors help tell the browser where to apply the CSS declarations.

Note

In the “Generic pattern” column of Table C-1, the values C, R, and S take the place of type selectors.

Table C-2 contains a list of pseudo-classes. A pseudo-class is a device by which a browser applies an invisible class on its own. For example, through the pseudo-class we are able to define properties for various visited, active, and hover states of the ubiquitous link.

Table C-3 contains a list of pseudo-elements. Similar in nature to a pseudo-class, a pseudo-element places invisible tags around content in a web page and then applies styles to that element. Since the structure is more like a typical element than a class, these elements are called pseudo-elements.

Table C-1. CSS 2.1 selectors

Selector	Generic pattern	Description	Sample
Universal	\*	Matches with any element	\* { text-decoration: none; }
Type	C	Matches any element; in this example, all h2 elements	h2 { font-weight: normal; }
Descendant	C R S	Matches any S element that is a descendant of element R, which is a descendant of element C	div#content p em { background-color: yellow; }
Child	C > S	Selects any S element that is a child of a C element	li > ul { list-style-type: circle;}
Adjacent sibling	C + S	Selects any S element that immediately follows a ...