HTML XHTML The Complete Reference
home » reference » appendix b » selectors

CSS Selectors


CSS1 and 2 support a rich set of selectors for specifying which particular element(s) that a CSS rule applies to. CSS1 selectors are presented in Table B-4. CSS2 introduces a number of new selectors as summarized in Table B-5. Many of these selectors use document context to determine how styles should be applied to elements, potentially reducing reliance on HTML/XHTML selectors such as class and id. For more information, see Chapter 11.

Selector
Description
Example
element Selects all elements of the name specified in the rule. h1 {color: red;}
/* makes all h1 tags red */
#id Selects any tag with an id attribute set. #test {color: green;}
/* makes a tag with id='test' green */
.class Selects any tag with the specified class value. .note {color: yellow;}
/* makes all tags with class='note' yellow */
element.class Selects the specified elements with a particular class value. h1.note {text-decoration: underline;}
/* underlines all H1 tags with class='note' */
Grouping Applies the same rules to a group of tags. h1,h2,h3 {background - color: orange;}
/* sets the background color of all h1,h2,and h3 elements to orange */
Contextual Selects descendent tags. p strong {color: purple;}
/* sets all strong tags that are descendents of p tags purple */
:first-line Selects the first line of an element. p:first-line {color: red;}
/* makes the first lines of a paragraph red */
:first-letter Selects the first letter of an element. p:first-letter {font-size: larger;}
/* makes the first letter of a paragraph larger */
a:link Specifies the unvisited link. a:link {font-weight: bold;}
/* makes unvisited links bold */
a:active Specifies the link as it is being pressed. a:active {color: red;}
/* makes links red as they are pressed */
a:visited Specifies the link after being pressed. a:visited {text-decoration: line-through;}
/* puts a line through visited links */
* The wildcard selector is used to apply a match to any element. It can be used for a global rule or, more commonly, in contextual or child selection rules. * {background - color: red;}
div * span {background - color: yellow;}
> This selector defines a rule that matches only elements that are directly enclosed within another element, such as a <p> tag with a document body. body > p {background - color: yellow;}
+ The adjacent sibling selector defines a rule that applies a style to the first incidence of an element immediately after the first element. In other words, the two tags are adjacent siblings in their parse tree. h1 + p {color: red;}
[ ] The attribute selector has many uses. Unfortunately, many browsers do not support it. The basic inclusion of an attribute name in brackets matches when the attribute is used on the selected element. A specific attribute value can be matched with = and pieces of an attribute can also be matched. The symbol ~= can be used to match space-separated attribute values while |= is used to match dash-separated attribute values. It is also possible to match multiple attribute values at once. a [href]
{ background - color: yellow;}

a [ href = "http:// www.htmlref.com" ]
{font-weight: bold;}
p [title~= "Test match" ]
{ font-style: italic; }
p [lang|= "en" ]
{ color: red; }
/* English text in red */
p [title= "Test Selector" ]
[ lang|= "en" ]
{border-style: dashed; border-width: 1px; }
@media Defines style rules for multiple media types in a single style sheet. See "Media-Dependent Style Sheets" in Chapter 11. @media screen {body {font-family: sans-serif; font-size: 18 pt;}}
@page Used to define rules for page sizing and orientation rules for printing. @page {size: 8.5in 11in;}
:left Sets page layout rules for a left-hand page when printing. @page :left {margin-left: 4cm; margin-right: 3cm;}
:right Sets page layout rules for a right-hand page when printing. @page :right {margin-left: 3cm; margin-right: 4cm;}
:first Sets page layout rules for the first page in a document when printing. /* Top margin on first page 10cm */
@page :first {margin-top: 10cm;}
:first-child Applies a style to the first child element of an element. p:first-child {color: red;}
:focus Changes the display of an element when the element receives focus (generally, <input="text">). input:focus{background - color: yellow;}
:hover Changes the display of an element when a cursor passes over the element. Commonly supported for links, but defined for nearly every element. a:hover {text-decoration: underline;}
p:hover {background - color: yellow;}
:lang Applies style to an element according to what language the element is in. *:lang(fr) {color: blue;}
*:lang(en) {color: red;}
:before Defines content to be placed before an element. See the content property for more information on use. div: before {content: url ( section.gif ) ;}
:after Defines content to be placed after an element. See the content property for more information on use. div:after {content: url(sectionend.gif);}
table b-5


TIP Developers should proceed with caution when using CSS2 selectors; many of the more complex ones are buggy or not supported even in modern browsers. However, they should not be avoided because when supported they can be used to create very powerful rules.

(X)HTML Elements
CSS Properties
Back: Color Values Next: Miscellaneous Constructs
< Home | About | Chapters | Examples | Errata | Reference | Site Map >