Pseudo-classes

What Are They?

The original pseudo-classes defined dynamic states of an element that are entered and exited over time, or through user intervention. CSS2 expanded on this concept to include virtual conceptual document components or inferred portions of the document tree (Netscape 6 has really expanded the use of this latter type of pseudo-class.)

The CSS specs do not always define which elements may be in a pseudo-class dynamic state, or the method in which the state is entered or exited. CSS2 DOES state that a browser is not required to re-render a document because of pseudo-class state transitions however.

Unlike Pseudo-elements, Pseudo-classes are allowed anywhere in CSS selectors.

Syntax

Ext/Doc: [element]:[pseudo-class] { property: value }

CSS Pseudo-Classes

State-dependent:

• :Link [CSS1|CSS2|CSS2.1] [IE3|N4|O3.5|S1]
  Applies to an unvisited hyperlink
• :Visited [CSS1|CSS2|CSS2.1] [IE3|N4|O3.5|S1]
  Applies to a visited hyperlink
• :Active [CSS1|CSS2|CSS2.1] [IE4|N6|O5|S1]
  The state during pointer activation (eg: press and release of a mouse) within the rendering region of an element.
• :Hover [CSS2|CSS2.1] [IE4|N6|O4|S1]
  The state during pointer movement within the rendering region of an element.
• :Focus [CSS2|CSS2.1] [N6|O7]
  The state during which an element accepts keyboard input.

Document Tree:

• :Root [N6|S1]
  Applies to the top-level (root) element in a document. In HTML, it is the HTML element.
• :Empty [N6]
  Applies to elements that have no content.
• :Not [N6|S1]
  This is a negation pseudo-class, allowing other selector rules to be negated.
• :First-child [CSS2|CSS2.1] [N6|O7]
  Applies to the first child/descendent of an element
• :First-node [N6]
  Applies to the first occurrence of an element/selector in the document tree.
• :Last-child [N6]
  Applies to the last child/descendent of an element
• :Last-node [N6]
  Applies to the last occurrence of an element/selector in the document tree.
• :Lang [CSS2|CSS2.1] [N7.1|O7.5]
  Applies to an element that contains the specified language (indicated using the lang or xml:lang attributes.)

Printing:

• :First, :Left, :Right [CSS2|CSS2.1] [O??]
  These only apply to the Page Box using the @Page At-Rule.

Proprietary:

(No sub-pages on most of these here because there is no real documentation for them anywhere at Mozilla/Netscape other than mention in the source code. Their use is discouraged anyway and are mentioned here only for the sake of completeness.)

• :Viewport [N6]
  Refers to the visual rendered viewing area.
• :Viewport-Scroll [N6]
  Refers to the box containing the visual rendered viewing area AND its attendant scrollbars.
• :Canvas [N6]
  Applies to the document's rendering canvas.
• :Scrolled-Content [N6]
  Applies to elements that use scrollbars (whether by default rendering behavior or through the use of the 'overflow' property's "scroll" value.
• :button-content [N6]
  Applies to the inside of BUTTON elements in forms.
• :cell-content [N6]
  Applies to individual cells in tables.
• :fieldset-content [N6]
  Applies to the inside of FIELDSET elements in forms. The region this can cover seems haphazard.
• :table-column [N6]
  Appears to apply to individual columns in tables.
• :table-column-group [N6?]
  Probably applies to column groups in tables. I haven't tried this one, but I am making the assumption that this works since :table-column does as well.
• :table-outer [N6]
  Appears to apply to the box defined by the outside edge of a table. Most properties don't apply, but 'padding' did.
• :-moz-any-link [N6]
  Applies to hyperlinks in any state ("viewed" or "unviewed")
• :-moz-dropdown-list [N6]
  Appears to only apply to SELECT lists in forms.
• :-moz-focus-inner [N6]
  Seems to apply only to form buttons widgets, on the inner edge, and only some properties - border and margin properties. Others like color, background and padding appeared to have no effect.
• :-moz-focus-outer [N6]
  Seems to apply only to form buttons widgets, on the outer edge, and only some properties - border and margin properties. Others like color, background and padding appeared to have no effect.
• :-moz-list-bullet [N6]
  Appears to only apply the list marker (bullets, numbers) in lists. Most properties did not apply, but 'padding' was odd - it directly changed the size of the bullet.

• Mozilla/Netscape 6 mentions MANY pseudo-classes, using both proprietary syntax ("-moz-" prefix) and normal syntax. Some of these I can not confirm through direct testing, and without any documentation, they will remain a mystery. =) (except for their minor claim-to-fame here):
  Addressing Elements:
  - :-moz-radio
  - :-moz-checkbox
  - :label-content
  - :legend-content
  - :table
  - :table-cell
  - :table-row
  - :table-row-group
  Addressing Element State:
  - :checked
  - :disabled
  - :enabled
  Other: (I haven't a clue what these may or may not do)
  - :body-column,
  - :-moz-anonymous-block,
  - :-moz-anonymous-positioned-block
  - :-moz-first-line-fixup
  - :-moz-line-frame
  - :-moz-singleline-textcontrol-frame
  - :-moz-display-comboboxcontrol-frame
  - :frameset-blank
  - :hframeset-border
  - :vframeset-border
  - :placeholder-frame
  - :wrapped-frame