Appendix C. CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements


Making sure style reaches the appropriate element is just as important as knowing the CSS properties. This appendix contains three reference tables that show you 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.

Note that in the Generic Pattern column, 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 ubiquitous link.

Table C-3 contains a list of pseudo-elements. Similar in nature to 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
SelectorGeneric PatternDescriptionSample
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 elements R, which is a descendant of elements C.
div#content p em { background-color: yellow; }

Child
C > S

Selects any S element that is a child of C element.
li > ul { list-style-type: circle;}

Adjacent Sibling
C + S

Selects any S element that immediately follows element C.
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 the value of classR.
img.content { padding: 4px; border: 1px solid black; }

ID
C#idR

Selects any C element that contains an id attribute with the 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 the 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-classGeneric PatternDescriptionSample
                                                  :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-elementGeneric patternDescriptionSample
                                                  :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: "Double true!";}





CSS Cookbook
CSS Cookbook, 2nd Edition
ISBN: 0596527411
EAN: 2147483647
Year: 2006
Pages: 235

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net