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
SelectorGeneric patternDescriptionSample

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
SelectorGeneric patternDescriptionSample

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

Get CSS Cookbook, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.