O'Reilly Network: CSS3 Selectors and Pseudo-Classes: Appendix D

This excerpt is from CSS Cookbook, Third Edition.

Learn how to solve the real problems you face with CSS. This cookbook offers hundreds of practical examples for using CSS to format your web pages, and includes code samples you can use right away. You'll find exactly what you need, from determining which aspects of CSS meet the specific needs of your site to methods for resolving differences in the way browsers display it.

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, CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements (which covers CSS 2.1 selectors) in conjunction with this listing.

Table D.1, “New CSS3 selector” describes the new CSS3 selector, the general sibling selector.

Note

In the “Generic pattern” column of Table D.1, “New CSS3 selector”, 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, “CSS3 attribute selectors” 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 any `C` element that contains the substring `valueR`	`img[alt*="executive"] { }`
Attribute selector	`C[attribute\|="valueR"]`	Selects any `C` element that contains an attribute value that’s a list of hyphen-separated values	`img[alt\|="non"] { opacity: .5;}`

Table D.3, “CSS3 structural pseudo-classes” contains a list of structural pseudo-elements. These allow you to pick out elements based on their order. For example, you can pinpoint the odd-numbered li elements using the nth-child selector instead of using the class attribute selector.

Table D.3. CSS3 structural pseudo-classes

Pseudo-class	Generic pattern	Description	Sample
`:last-child`	`C:last-child`	Matches element `C` that is the last child in another element	`divs p:last-child {color: white; background-color: black; }`
`:target`	`C:target`	Matches the `C` element when activating a fragment link (e.g., `#section`)	`#section:target {background-color: yellow;}`
`:enabled`	`C:enabled`	Matches the `C` element when the `C` element is in an enabled state	`input[type="age"]:` `enabled {background-color: green;}`
`:disabled`	`C:disabled`	Matches the `C` element when the `C` element is in a disabled state	`input[type="password"]:disabled {background-color: #999;}`
`:root`	`:root`	Matches the root of the document; in HTML4 documents, this is the `HTML` element	`:root {display: block;}`
`:nth-child()`	`C:nth-child(an+b)`	Matches elements in a document tree that have a certain number of siblings before it; where `n` is an integer, `:nth-child(an+b)` would match the element that has `an+b-1` siblings before it	`tr:nth-child(2n) {background-color: #99ff99;}`
`:nth-last-child()`	`C:nth-last-child(an+b)`	Matches elements in a document tree that have a certain number of siblings after it; where `n` is an integer, `:nth-last-child(an+b)` would match the element that has `an+b-1` siblings before it	`tr:nth-last-child(-2n) {background-color: #99ff99;}`
`:nth-of-type()`	`C:nth-of-type(an+b)`	Matches elements in a document tree that have a certain number of siblings before it; where `n` is an integer `:nth-of-type(an+b)` would match the element that has `an+b-1` siblings before it	`tr:nth-of-type(2n) {float:right;}`
`:nth-last-of-type()`	`C:nth-last-of-type(an+b)`	Matches elements in a document tree that have a certain number of siblings after it; where `n` is an integer `:nth-of-type(an+b)` would match the element that has `an+b-1` siblings before it	`tr:nth-last-of-type(2n) {float:right;}`
`:first-of-type`	`C:first-of-type`	Matches the first child element of the specified element type	`p:first-of-type {font-weight: bold;}`
`:last-of-type`	`C:last-of-type`	Matches the last child element of the specified element type	`p:last-of-type {background-color: black;}`
`:only-child`	`C:only-child`	Matches the child element if it is the only child element of its parent	`li:only-child {font-size: 2em;}`
`:only-of-type`	`C:only-of-type`	Matches the child element if it is the only child element of its parent	`li:only-of-type {font-size: 2em;}`
`:empty`	`C:empty`	Matches any element that has no children	`*:empty {background: red; height: 100px;}`
`:not()`	`C:not(R)`	Matches all elements within the `C` element, except the `R` elements	`*:not(:hover)` `{opacity: .7;}`

CSS3 Selectors and Pseudo-Classes: Appendix D - CSS Cookbook, Third Edition

Note