CSS Introduction | CSS Selectors | Pseudo-classes

Tags:

Pseudo-classes

In CSS, a pseudo-class is used to specify a special state of the HTML element you want to select.

CSS Pseudo-classes

Pseudo-class Description
:link Selects links to pages the user has not yet visited. This is the default state.
:visited Selects links to pages the user has visited at least once.
:hover Selects links while the user’s mouse cursor is over them.
:active Selects links while the user is clicking them with the mouse.
:focus Selects input elements that have focus.
:checked Selects all checked input elements.
:enabled Selects all enabled input elements.
:disabled Selects all disabled input elements.
:target Selects all currently active target elements.
:in-range Selects all input elements whose values are within a specific range.
:out-of-range Selects all input elements whose values are outside a specific range.
:read-only Selects all input elements with the readonly attribute.
:read-write Selects all input elements without the readonly attribute.
:required Selects all input elements with the required attribute.
:optional Selects all input elements without the required attribute.
:valid Selects all input elements with valid values.
:invalid Selects all input elements with invalid values.
:first-child Selects the first child element among all child elements.
:last-child Selects the last child element among all child elements.
:nth-child Selects child elements located in the nth position from the beginning.
:nth-last-child Selects child elements located in the nth position from the end.
:first-of-type Selects the first element of a specific type among all child elements.
:last-of-type Selects the last element of a specific type among all child elements.
:nth-of-type Selects elements of a specific type that appear in the nth position among all child elements.
:nth-last-of-type Selects elements of a specific type that appear in the nth position from the end.
:only-child Selects child elements of all elements that have only one child element.
:only-of-type Selects child elements of all elements that have only one child element of a specific type.
:empty Selects all elements that have no child elements.
:root Selects the root element of the document.
:not(selector) Can be used with any selector and applies that selector in reverse.
:lang(language) Used when a specific element should be rendered differently according to language settings.

Syntax of Pseudo-classes

The syntax for using a pseudo-class is as follows.

Syntax

selector:pseudo-class-name {property: value;}

Pseudo-classes can also be used with classes or IDs.

Syntax

selector.class-name:pseudo-class-name {property: value;} 
selector#id-name:pseudo-class-name {property: value;}

Pseudo-class names are not case-sensitive.

Representative CSS Pseudo-classes

Representative pseudo-classes commonly used in CSS are as follows.

  1. Dynamic pseudo-classes

    • :link
    • :visited
    • :hover
    • :active
    • :focus

  2. UI element state pseudo-classes

    • :checked
    • :enabled
    • :disabled

  3. Structural pseudo-classes

    • :first-child
    • :nth-child
    • :first-of-type
    • :nth-of-type

  4. Other pseudo-classes

    • :not
    • :lang