CSS Cookbook, 2nd Edition

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

Making sure style reaches the appropriate element is just as important as knowing the CSS properties. This appendix contains three reference tables that show you 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.

Tip

Note that in the Generic Pattern column, 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 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 elements R, which is a descendant of elements C.	div#content p em { background-color: yellow; }
Child	C > S	Selects any S element that is a child of C element. ...