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 N^th child elements of their parent
• :nth-last-child(N) - select N^th child element of their parent, but from the last
• :nth-of-type(N) - select element which is the N^th child of specified type, of its parent
• :nth-last-of-type(N) - select N^th 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