Section B.2. Pseudo-Classes and Pseudo-Elements

B.2. Pseudo-Classes and Pseudo-Elements B.2.1. :active This applies to an element during the period in which it is activated. The most common example of this is clicking on a hyperlink in an HTML document: during the time that the mouse button is held down, the link is active. There are other ways to activate elements, and other elements can in theory be activated, although CSS doesn't define this. Type: Pseudo-class Applies to: An element that is being activated Examples: a:active {color: red;} *:active {background: blue;} B.2.2. :after This allows the author to insert generated content at the end of an element's content. By default, the pseudo-element is inline, but this can be changed using the property display. Type: Pseudo-element Generates: A pseudo-element containing generated content placed after the content in the element Examples: a.external:after {content: " " url(/icons/globe.gif);} p:after {content: " | ";} B.2.3. :before This allows the author to insert generated content at the beginning of an element's content. By default, the pseudo-element is inline, but this can be changed using the property display. Type: Pseudo-element Generates: A pseudo-element containing generated content placed before the content in the element Examples: a[href]:before {content: "[LINK] ";} p:before {content: attr(class);} B.2.4. :first-child With this pseudo-class, an element is matched only when it is the first child of another element. For example, p:first-child will select any p element that is the first child of some other element. It does not, as is commonly assumed, select whatever element is the first child of a paragraph; for that, an author would write p > *:first-child. Type: Pseudo-class Applies to: Any element that is the first child of another element Examples: body *:first-child {font-weight: bold;} p:first-child {font-size: 125%;} B.2.5. :first-letter This is used to style the first letter of an element. Any leading punctuation should be styled along with the first letter. Some languages have letter combinations that should be treated as a single character, and a user agent may apply the first-letter style to both. Prior to CSS2.1, :first-letter could be attached only to block-level elements. CSS2.1 expands its scope to include all elements. There is a limited set of properties that can apply to a first letter. Type: Pseudo-element Generates: A pseudo-element that contains the first letter of an element Examples: h1:first-letter {font-size: 166%;} a:first-letter {text-decoration: underline;} B.2.6. :first-line This is used to style the first line of text in an element, no matter how many or how few words may appear in that line. :first-line can be attached only to block-level elements. There is a limited set of properties that can apply to a first line. Type: Pseudo-element Generates: A pseudo-element that contains the first formatted line of an element Examples: p.lead:first-line {font-weight: bold;} B.2.7. :focus This applies to an element during the period in which it has focus. One example from HTML is an input box that has the text-input cursor within it; that is, when the user starts typing, text will be entered into that box. Other elements, such as hyperlinks, can also have focus, although CSS does not define which ones. Type: Pseudo-class Applies to: An element that has focus Examples: a:focus {outline: 1px dotted red;} input:focus {background: yellow;} B.2.8. :hover This applies to an element during the period in which it is "hovered." Hovering is defined as the user designating an element without activating it. The most common example of this is moving the mouse pointer inside the boundaries of a hyperlink in an HTML document. Other elements can in theory be hovered, although CSS doesn't define which ones. Type: Pseudo-class Applies to: An element in a hovered state Examples: a[href]:hover {text-decoration: underline;} p:hover {background: yellow;} B.2.9. :lang This matches elements based on their human language encoding. Such language information must be contained within or otherwise associated with the document; it cannot be assigned from CSS. The handling of :lang is the same as for |= attribute selectors. Type: Pseudo-class Applies to: Any element with associated language-encoding information Examples: html:lang(en) {background: silver;} *:lang(fr) {quotes: '« ' ' »';} B.2.10. :link This applies to a link to a URI that has not been visited; that is, the URI to which the link points does not appear in the user agent's history. This state is mutually exclusive with the :visited state. Type: Pseudo-class Applies to: A link to another resource that has not been visited Examples: a:link {color: blue;} *:link {text-decoration: underline;} B.2.11. :visited This applies to a link to a URI that has been visited; that is, the URI to which the link points appears in the user agent's history. This state is mutually exclusive with the :link state. Type: Pseudo-class Applies to: A link to another resource that has already been visited Examples: a:visited {color: purple;} *:visited {color: gray;}