Appendix

CSS3 Selectors
Selector

Type of selector

Description

Simple selectors and combinators

*

Universal selector

Matches any element

* {font-family: serif;}

Type selector

Matches the name of an element.

A, B

Grouped selectors

Matches elements A and B.

div {font-style: italic;}

h1, h2, h3 {color: blue;}

A B

Descendant selector

Matches element B only if it is a descendant of element A.

blockquote em {color: red;}

A>B

Child selector

Matches any element B that is a child of element A.

A+B

Adjacent sibling selector

Matches any element B that immediately follows any element A,

where A and B share the same parent.

A~B

General sibling selector

Matches any element B that is preceded by A, where A and B share

the same parent.

div.main>p {line-height: 1.5;}

p+ul {margin-top: 0;}

blockquote~cite {margin-top: 0;}

Class and ID selectors

.classname
A.classname

Class selector

Matches the value of the class attribute in all elements or in a

specified element.
p.credits {font-size: 80%;}

#idname
A#idname

ID selector

Matches the value of the id attribute in an element.

#intro {font-weight: bold;}

Attribute selectors
A[att]

Simple attribute selector

Matches any element A that has the given attribute defined, whatever its value.
table[border] {background: white;}

A[att="val"]

Exact attribute value selector

Matches any element A that has the specified attribute set to the
specified value.
table[border="3"] {background: yellow;}

583

Selector

Type of selector

Description

A[att~="val"]

Partial attribute value selector

Matches any element A that has the specified value as one of the
values in a list given to the specified attribute.
table[class~="example"] {background: yellow;}

A[att|="val"]

Hyphenated prefix attribute

selector

Matches any element A that has the specified attribute with a

value that is equal to or begins with the provided value. It is
most often used to select languages, as shown here.
a[lang|="en"] {background-image: url(en_icon.png);}

A[att^="val"]

Beginning substring attribute

selector

Matches any element A that has the specified attribute and its
value begins with the provided string.
img[src^="/images/icons"] {border: 3px solid;}

A[att$="val"]

Ending substring attribute selector

Matches any element A that has the specified attribute and its
value ends with the provided string.

A[att*="val"]

Arbitrary substring attribute

selector

Matches any element A that has the specified attribute and its
value contains the provided string.

img[src^="/images/icons"] {border: 3px solid;}

img[title#="July"] {border: 3px solid;}

Pseudo-class selectors
a:link

Link pseudo-class selector

Specifies a style for links that have not yet been visited.
a:link {color: maroon;}

a:visited

Link pseudo-class selector

Specifies a style for links that have already been visited.

a:visited {color: gray;}

:active

User action pseudo-class selector

Selects any element that has been activated by the user, such as a
link as it is being clicked.

:focus

User action pseudo-class selector

Selects any element that currently has the input focus, such as a
selected form input.

a:active {color: red;}

input[type="text"]:focus {background: yellow;}

:hover

User-action pseudo-class selector

Specifies a style for elements (typically links) that appear when the
mouse is placed over them.
a:hover {text-decoration: underline;}
h1:target {color: red;}

:target

Target pseudo-class selector

Selects an element that is used as a fragment identifier.

:lang(xx)

Pseudo-class selector

Selects an element that matches the two-character language code.

a:lang(de) {color: green;}

:root

Structural pseudo-class selector

Selects an element that is the root of the document. In HTML, it is

the html element.
:root { background: papayawhip;}

:nth-child()

Structural pseudo-class selector

Selects an element that is the nth child of its parent. The notation can include a number, a notation, or the keywords odd or
even.
tr:nth-child(odd) { background: #DDD;}

:nth-last-child()

Structural pseudo-class selector

Selects an element that is the nth child of its parent, counting from
the last one.
li:nth-last-child(2) { color: green;}

584

Appendix B

Selector

Type of selector

Description

:nth-of-type()

Structural pseudo-class selector

Selects the nth element of its type.

:nth-last-oftype()

Structural pseudo-class selector

Selects the nth element of its type, counting from the last one.

:first-child

Structural pseudo-class selector

img:nth-of-type(even) {float: right;}

img:nth-last-of-type(odd) {float: right;}

Selects an element that is the first child of its parent element.

p:first-child {border-top: 1px solid;}

:last-child

Structural pseudo-class selector

Selects an element that is the last child of its parent element.

p:last-child {border-bottom: 1px solid;}

:first-of-type

Structural pseudo-class selector

Selects an element that is the first sibling of its type.

dt:first-of-type {font-weight: bold;}

:last-of-type

Structural pseudo-class selector

Selects an element that is the last sibling of its type.

li:last-of-type {margin-bottom: 1em;}

:only-child

Structural pseudo-class selector

Selects an element that is the only child of its parent.

aside:only-child {line-height: 1.5;}

:only-of-type

Structural pseudo-class selector

Selects an element that is the only sibling of its type.

:empty

Structural pseudo-class selector

Selects an element that has no text and no child elements.

dt:first-of-type {font-weight: bold;}

tbody td:empty {background: #000; }

:enabled

UI pseudo-class selector

Selects a UI element if it is enabled

:disabled

UI pseudo-class selector

Selects a UI element if it is disabled.

input[type="tel"]:enabled {border: 1px solid red;}

input[type="tel"]:disabled {color: #ccc;}

:checked

UI pseudo-class selector

Selects a UI element (radio button or checkbox) that is checked.

:not(X)

Negation pseudo-class selector

Selects an element that does not match the simple selector X.

:checked {background-color: yellow;}

:not(pre) { line-height: 1.2 }

Pseudo-element selectors
:first-letter
(::first-letter

Pseudo-element selector

Selects the first letter of the specified element.

p:first-letter {font-size: 4em;}

in CSS3)
:first-line
(::first-line in

Pseudo-element selector

Selects the first letter of the specified element.

.note:first-line {letter-spacing: 4px;}

CSS3)
:before
(::before in

Pseudo-element selector

CSS3)
:after
(::after in CSS3)

Inserts generated text at the beginning of the specified element and

applies a style to it.
p.intro:before {content: "start here"; color: gray;}

Pseudo-element selector

Inserts generated content at the end of the specified element and

applies a style to it.
p.intro:after {content: "fini"; color: gray;}

CSS3 Selectors

585