CSS Pseudo-Classes

In CSS, pseudo-classes are basically keywords that specifies the special state of elements. A CSS pseudo-class starts with a colon (:).

The syntax to use pseudo-class in CSS, is:

selector:pseudoClass {declaration}

For example:

a:hover {color: red;}

The above CSS code, specifies that a element gets colored to red, when a mouse cursor hovers over it (link).

Note - Selector is used to select an HTML element within a web page.

List of All CSS Pseudo-Classes

  • :link - select non-visited links
  • :visited - select visited links
  • :hover - select on mouse hovers
  • :active - select an active link. A link becomes active, when user clicks on it.
  • :empty - select an element with no child element
  • :first-of-type - select the first child element of specified element type of its parent
  • :first-child - select the first child element of its parent
  • :last-child - select the last child element of its parent element
  • :focus - select a field, when user provides the input
  • :lang() - select an element that has the lang attribute with matching value
  • :last-of-type - select the last child element of specified element type, of their parent
  • :not(X) - select all elements except the specified one, the X element
  • :nth-child(N) - select Nth child elements of their parent
  • :nth-last-child(N) - select Nth child element of their parent, but from the last
  • :nth-of-type(N) - select element which is the Nth child of specified type, of its parent
  • :nth-last-of-type(N) - select Nth elements of specified type, from the last of its parent
  • :only-of-type - select an element that is the only child element of specified type, of its parent element
  • :only-child - select element that is the only child of its parent element
  • :optional - select FORM elements (INPUT, SELECT, TEXTAREA), that are optional
  • :required - select FORM ELEMENTs having REQUIRED attribute
  • :read-only - select element with READONLY attribute
  • :read-write - select all FORM ELEMENTs, that haven't DISABLED and/or READONLY attribute(s)
  • :in-range - select all those values that are within a specified range
  • :out-of-range - select an INPUT element of a form, when the value given by user, is out of specified limit
  • :valid - select FORM ELEMENTs when user provides valid value
  • :invalid - select FORM field with invalid inputs
  • :root - select the root element of an HTML document
  • :target - select the target element to style some part of a web page, or a specific element in a web page
  • :checked - select CHECKED element
  • :enabled - select ENABLED element
  • :disabled - select DISABLED element

CSS Online Test


« Previous Tutorial Next Tutorial »