O'Reilly    
 Published on O'Reilly (http://oreilly.com/)
 See this if you're having trouble printing code examples


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

by Christopher Schmitt
CSS Cookbook, Third Edition book cover

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.

buy button

 

 

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;}


If you enjoyed this excerpt, buy a copy of CSS Cookbook, Third Edition.

Copyright © 2009 O'Reilly Media, Inc.