O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required