CSS3 Selectors and Pseudo-Classes: Appendix D - CSS Cookbook, Third Edition
by
Christopher Schmitt
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;}
|
If you enjoyed this excerpt, buy a copy of CSS Cookbook, Third Edition.
