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