Selectors, Pseudo Classes, and Pseudo Elements
The following selector types, pseudo classes, and pseudo elements are available for use in CSS 2.1.
Selector: Adjacent sibling selector
Description: Selects an adjacent sibling (one that is directly adjacent to the first defined selector and that shares the same parents)
Example:
h1 + p {
text-indent: 0;
}
Tips: This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it, or for hacks.
Selector: Attribute selector
Description: Selects an element based on its attributes
Example:
acronym [title] {
color: red;
}
Tips: This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it, or for hacks.
Selector: Child selector
Description: Selects the children of a given element
Example:
#content > p {
padding: 10px;
}
Tips: This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it, or for hacks.
Selector: Class selector
Description: Allows the creation of a custom class. Called in the HTML or XHTML using the class attribute within the element to be selected.
Example:
.notation {
font-size: xx-small;
}
Tips: This selector is widely supported and, therefore, overused. Avoid overuse by streamlining CSS with descendant selectors instead.
Selector: Descendant selector
Description: Selects all the descendant elements of a parent element
Example:
#content p {
font-family: Arial, Helvetica, sans-serif;
}
Tips: This selector is widely supported and should be used as often as possible, to reduce reliance on class selectors.
Selector: ID selector
Description: Allows the creation of a uniquely identified selector. Called in the HTML or XHTML using the id attribute within the element to be selected. Can be used only once per document.
Example:
#content {
margin-left: 25px;
margin-right: 25px;
}
Tips: This selector is widely supported and typically used to describe sections of a document used for layout. It is also used to bind elements to scripts in DHTML.
Selector: Universal selector
Description: Selects all elements
Example:
* {
border: 1px dashed blue;
}
Tips: This selector is very helpful when working with diagnostics, but it should be avoided for general use. Some problems with universal selector behavior exist in Internet Explorer versions.
Selector: Element (type) selector
Description: A selector matching the element type
Example:
h1 {
font-size: 22px;
}
Tips: Very widely supported, this is the most commonly used selector.
Selector: :active dynamic pseudo class
Description: Selects an element while that element is being activated by the user
Example:
a:active {
color: red;
}
Tips: This selector is widely supported. When styling links, you must follow the LoVe/HAte order of link, visited, hover, active, or results might be inconsistent.
Selector: :after pseudo element
Description: Used to insert generated text after the selected element
Example:
a:after {
content: link;
}
Tips: This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it.
Selector: :before pseudo element
Description: Used to insert generated text before the selected element
Example:
a:before {
content: link;
}
Tips: This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it.
Selector: :firstchild pseudo class
Description: Used to select the first child of an element only
Example:
p:firstchild em {
font-weight: bold;
}
Tips: This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it.
Selector: :firstletter pseudo element
Description: Used to select the first letter of an element only
Example:
#content p:firstletter {
font-size: larger;
}
Tips: Good support exists in all contemporary browsers. This selector is helpful in creating nonimage-based drop caps.
Selector: :firstline pseudo element
Description: Used to select the first line of an element only
Example:
#content p:firstline {
color: red;
}
Tips: Good support exists in all contemporary browsers. This selector applies the style to the first line. If the line length changes because of browser resize, the style is still applied to whatever the first line is.
Selector: :focus dynamic pseudo class
Description: Applies the style when an element has focus (is accepting keyboard input, such as in a form)
Example:
input:focus {
border: 1px solid red;
}
Tips: This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it.
Selector: :hover dynamic pseudo class
Description: Applies the style when an element is hovered over with the mouse or pointing device
Example:
#toggle:hover {
border: 1px solid green;
}
Tips: This selector is unavailable for use in Internet Explorer except as applied to the a element. Therefore, it is used primarily for enhancing styles in browsers that do support it.
Selector: :lang pseudo class
Description: Selects an element based on its language
Example:
p:lang(de) {
quotes: '»' '«' '\2039' '\203A'
}
Tips: Inconsistent support exists. This selector is used for multilingual documents and internationalization.
Selector: :link link pseudo class
Description: Selects a link in the normal state
Example:
a:link {
color: #ccc;
}
Selector: :visited link pseudo class
Description: Selects a link in the visited state
Example:
a:visited {
color: #333;
}
Tips: This selector is very widely supported. Remember the LoVe/HAte order rule, to avoid inconsistent behavior.