CSS Cookbook, 3rd Edition

Appendix D. CSS3 Selectors and Pseudo-Classes

Although CSS3 is still being worked on as this book is being written, some browser vendors are starting to support properties from the unfinished specification. This appendix provides a listing of the new CSS3 selectors for your reference.

To get a solid idea of what tools you have at your disposal to apply styles to a document, consult Appendix C (which covers CSS 2.1 selectors) in conjunction with this listing.

Table D-1 describes the new CSS3 selector, the general sibling selector.

Note

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

Table D-1. New CSS3 selector

Selector	Generic pattern	Description	Sample
General sibling combinator	C \~ R	Matches any R element that is preceded by a C element	#content \~ img + +{ padding: 2px; border 2px solid black; }

Table D-2 contains a list of new attribute selectors. These allow greater control when selecting elements in a document based on an attribute’s value or even a small portion of that value.

Table D-2. CSS3 attribute selectors

Selector	Generic pattern	Description	Sample
Attribute selector	C\[attribute\^="valueR"\]	Selects any C element that contains the attribute that begins with the value of valueR	img\[alt\^="mugshot"\] { width: 100px; }
Attribute selector	C\[attribute$="valueR"\]	Selects any C element that contains the attribute whose value exactly matches valueR	img\[alt$="photo"\] { border: 10px solid red; }
Attribute selector	C\[attribute\*="valueR"\]	Selects ...