O'Reilly    
 Published on O'Reilly (http://oreilly.com/)
 See this if you're having trouble printing code examples


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

by Christopher Schmitt
CSS Cookbook, Third Edition book cover

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.

buy button

 

 

This appendix contains three reference tables that can help you learn how to apply styles to the correct elements.

Table C.1, “CSS 2.1 selectors” contains the CSS 2.1 selectors. Selectors help tell the browser where to apply the CSS declarations.

Note

In the “Generic pattern” column of Table C.1, “CSS 2.1 selectors”, the values C, R, and S take the place of type selectors.

Table C.2, “CSS 2.1 pseudo-classes” 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 ubiquitous link.

Table C.3, “CSS 2.1 pseudo-elements” 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 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!"}


Table C.2. CSS 2.1 pseudo-classes

Pseudo-class

Generic pattern

Description

Sample

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


Table C.3. CSS 2.1 pseudo-elements

Pseudo-element

Generic pattern

Description

Sample

: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!";}


If you enjoyed this excerpt, buy a copy of CSS Cookbook, Third Edition.

Copyright © 2009 O'Reilly Media, Inc.