APPENDIX C

CSS 2.1 Selectors, Pseudo-Classes, and

Pseudo-Elements

This appendix contains three reference tables that can help you learn how to apply
styles to the correct elements.
Table C-1 contains the CSS 2.1 selectors. Selectors help tell the browser where to apply
the CSS declarations.

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

Table C-2 contains a list of pseudo-classes. A pseudo-class is a device by which a

browser applies an invisible class on its own. For example, through the pseudo-class
we are able to define properties for various visited, active, and hover states of the ubiq-
uitous link.
Table C-3 contains a list of pseudo-elements. Similar in nature to a pseudo-class, a
pseudo-element places invisible tags around content in a web page and then applies
styles to that element. Since the structure is more like a typical element than a class,
these elements are called pseudo-elements.
Table C-1. CSS 2.1 selectors
Selector Generic pattern Description Sample
Universal * Matches with any * { text-decoration: none; }
element
Type C Matches any ele- h2 { font-weight: normal; }
ment; in this exam-
ple, all h2
elements

669
 Selector Generic pattern Description Sample
Descendant C R S Matches any S div#content p em { background-
element that is a color: yellow; }
descendant of ele-
ment R, which is a
descendant of
element C
Child C > S Selects any S ele- li > ul { list-style-type:
ment that is a child circle;}
of a C element
Adjacent sibling C + S Selects any S ele- div#content+p { text-indent:
ment that immedi- 0;}
ately follows a C
element
Grouping C, R, S Several selectors h1, h2, h3, h4 { color: #0cf;}
utilize the same
declaration(s)
Class C.classR Selects any C ele- img.content { padding: 4px;
ment that contains border: 1px solid black; }
a class attribute
with a value of
classR
ID C#idR Selects any C ele- div#content { color: #333;}
ment that contains
an id attribute
with a value of idR
Attribute selector C[attribute] Selects any C ele- a[link] {text-decoration:
ment that contains none;}
the attribute
Attribute selector C[attribute="valueR"] Selects any C ele- input[type="text"] { width:
ment that contains 33%; }
the attribute with a
value of valueR
Attribute selector C[attribute~="valueR"] Selects any C ele- div.advertisement
ment that contains form[class~="login"] { float:
the attribute whose left; margin-left: 7px; }
value is a space-
separated list of
words and one of
the words in that list
matches valueR

670 | Appendix C:CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements

 Selector Generic pattern Description Sample
Attribute selector C[attribute|="valueR"] Selects any C ele- .warning[lang="uk"]:after
ment that contains { content: " Blimey!"}
the attribute whose
value is a
hyphen-separated
list of words and the
first word matches
valueR

Table C-2. CSS 2.1 pseudo-classes

Pseudo-class Generic pattern Description Sample
:first-child C:first-child Matches element C divs p:first-child {color:
that is the first child white; background-color:
in another element red; }
:link C:link Matches any unvis- a:link {text-decoration:
ited link of element none; }
C
:visited C:visited Matches any visited a:visited {font-weight:
link of element C normal; }
:hover C:hover Matches the C ele- a:hover { background-color:
ment a user has se- orange; }
lected (typically by
moving the cursor
icon over a link) but
not activated
:active C:active Matches the C ele- a:active { color: green; }
ment a user has
activated
:focus C:focus Matches the C ele- input:focus { background-
ment that contains color: #F7F7D5;}
the focus (typically
an input field of a
form)
:lang C:lang(R) Matches the C ele- p:lang(en) {font-weight:
ment that uses the bold;}
language R

CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements | 671

Table C-3. CSS 2.1 pseudo-elements
Pseudo-element Generic pattern Description Sample
:first-line C:first-line Selects the first line h2+p:first-line {color:
of text in the C #727977;}
element
:first-letter C:first-letter Selects the first let- h1:first-letter { font-size:
ter in the C element 66%; text-transform: lower
case; }
:before C:before Places generated ul.tracklisting li:before
content before an {content: "Song title: ";}
element; used with
the content
property
:after C:after Places generated div#footer p.copyright:after
content after an el- {content: "ouble true!";}
ement; used with
the content
property

672 | Appendix C:CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements

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

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 C ~ R Matches any R element that is pre- #content ~ img { padding:
combinator ceded by a C element 2px; border 2px solid
black; }

673
Table D-2 contains a list of new attribute selectors. These allow greater control when
selecting elements in a document based on an attributes value or even a small portion
of that value.
Table D-2. CSS3 attribute selectors
Selector Generic pattern Description Sample
Attribute C[attribute^="valueR"] Selects any C element that contains the img[alt^="mugshot"]
selector attribute that begins with the value of { width: 100px; }
valueR
Attribute C[attribute$="valueR"] Selects any C element that contains the img[alt$="photo"]
selector attribute whose value exactly matches { border: 10px
valueR solid red; }
Attribute C[attribute*="valueR"] Selects any C element that contains the img[alt*="execu
selector substring valueR tive"] { }
Attribute C[attribute|="valueR"] Selects any C element that contains an img[alt|="non"]
selector attribute value thats a list of hyphen- { opacity: .5;}
separated values

Table D-3 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.

674 | Appendix D:CSS3 Selectors and Pseudo-Classes