APPENDIX B CSS 2.1 SELECTORS

Selector

Type of Selector

Description

*

Universal selector

Matches any element

* {font-family: serif;}

A

Element type selector

Matches the name of an element.

div {font-style: italic;}

A, B

Grouped selectors

Matches elements A and B

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.

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

A+B

Adjacent sibling selector

Matches any element B that immediately follows any element A.

p+ul {margin-top: 0;}

.classnameA.classname

Class selector

Matches the value of the class attribute in all elements or in a specified element.

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

#idnameA#idname

ID selector

Matches the value of the id attribute in an element.

#intro {font-weight: bold;}

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

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

Get Learning Web Design, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.