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.
