CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements: Appendix C - CSS Cookbook, Third Edition

Universal

*

Matches with any element

* { text-decoration: none; }

Type

C

Matches any element; in this example, all h2 elements

h2 { font-weight: normal; }

Descendant

C R S

Matches any S element that is a descendant of element R, which is a descendant of element C

div#content p em { background-color: yellow; }

Child

C > S

Selects any S element that is a child of a C element

li > ul { list-style-type: circle;}

Adjacent sibling

C + S

Selects any S element that immediately follows a C element

div#content+p { text-indent: 0;}

Grouping

C, R, S

Several selectors utilize the same declaration(s)

h1, h2, h3, h4 { color: #0cf;}

Class

C.classR

Selects any C element that contains a class attribute with a value of classR

img.content { padding: 4px; border: 1px solid black; }

ID

C#idR

Selects any C element that contains an id attribute with a value of idR

div#content { color: #333;}

Attribute selector

C[attribute]

Selects any C element that contains the attribute

a[link] {text-decoration: none;}

Attribute selector

C[attribute="valueR"]

Selects any C element that contains the attribute with a value of valueR

input[type="text"] { width: 33%; }

Attribute selector

C[attribute~="valueR"]

Selects any C element that contains the attribute whose value is a space-separated list of words and one of the words in that list matches valueR

div.advertisement form[class~="login"] { float: left; margin-left: 7px; }

Attribute selector

C[attribute|="valueR"]

Selects any C element that contains the attribute whose value is a hyphen-separated list of words and the first word matches valueR

.warning[lang="uk"]:after { content: " Blimey!"}

:first-child

C:first-child

Matches element C that is the first child in another element

divs p:first-child {color: white; background-color: red; }

:link

C:link

Matches any unvisited link of element C

a:link {text-decoration: none; }

:visited

C:visited

Matches any visited link of element C

a:visited {font-weight: normal; }

:hover

C:hover

Matches the C element a user has selected (typically by moving the cursor icon over a link) but not activated

a:hover { background-color: orange; }

:active

C:active

Matches the C element a user has activated

a:active { color: green; }

:focus

C:focus

Matches the C element that contains the focus (typically an input field of a form)

input:focus { background-color: #F7F7D5;}

:lang

C:lang(R)

Matches the C element that uses the language R

p:lang(en) {font-weight: bold;}

:first-line

C:first-line

Selects the first line of text in the C element

h2+p:first-line {color: #727977;}

:first-letter

C:first-letter

Selects the first letter in the C element

h1:first-letter { font-size: 66%; text-transform: lowercase; }

:before

C:before

Places generated content before an element; used with the content property

ul.tracklisting li:before {content: "Song title: ";}

:after

C:after

Places generated content after an element; used with the content property

div#footer p.copyright:after {content: "ouble true!";}