CSS Pseudo Class Selectors

CSS Pseudo Class Selectors

CSS Pseudo Class Selectors are used to select the HTML Elements with special state like checked, active or visited. There are 31 Pseudo Class Selectors.

Table of Contents

Use of CSS Pseudo Class Selectors

Pseudo classes define different states of HTML Elements and CSS Pseudo Class Selectors are used to select all HTML Elements with a specific state.

For example: Pseudo Class Selectors can be used to select only visited links or elements that are active or elements with required attribute. For all these examples Pseudo Class Selectors can be used.

Syntax of CSS Pseudo Class Selector

The syntax of CSS Pseudo Class Selector is shown below.

a:visited {
color: red;
}

Colon(:) is an important part of all Pseudo Class Selectors.

Example of CSS Pseudo Class Selectors

Look at the simple example below, this simple example will change the color of paragraph element when mouse hovers over it.

p:hover {
  color: blue;
}

This next example will change the color of all paragraph elements when mouse hovers over the div element.

div:hover p {
  color: blue;
}

This next example will change the background color of first list item inside the ul tag.

ul li:first-child {
  background-color: red;
}

List of CSS Pseudo Class Selectors

The List of all CSS Pseudo Class Selectors is given below.

CSS Pseudo Class Selector Example Description
:active a:active Selects the active link.
:checked input:checked Selects checked input elements.
:disabled input:disabled Selects disabled input element.
:empty div:empty Selects every div element which has no children.
:enabled input:enabled Selects every enabled input element.
:first-child li:first-child Selects every list element that is the first child of it's parent.
:first-of-type p:first-of-type Selects every p element that is the first p type element of its parent.
:focus input:focus Selects the input element that has focus.
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects input elements with a value within a specified range
:invalid input:invalid Selects all input elements with invalid value.
:lang(language) p:lang(en) Selects every paragraph element with a lang attribute value starting with "en".
:last-child p:last-child Selects every p element that is the last child of it's parent.
:last-of-type p:last-of-type Selects every p element that is the last p element of it's parent.
:link a:link Selects all unvisited links.
:not(selector) :not(p) Selects every element on page that is not a paragraph element.
:nth-child(n) p:nth-child(2) Selects every paragraph element that is second child of it's parent.
:nth-last-child(n) p:nth-last-child(2) Selects every paragraph element that is the second child of its parent, counting from the last child.
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every paragraph element that is the second p element of its parent, counting from the last child.
:nth-of-type(n) p:nth-of-type(2) Selects every p element that is the second p type element of it's parent.
:only-of-type p:only-of-type Selects every p element that is the only p type element of it's parent.
:only-child a:only-child Selects every anchor element that is the only child of it's parent.
:optional input:optional Selects input elements which has no "required" attribute.
:out-of-range input:out-of-range Selects input elements with a value outside a specific range.
:read-only input:read-only Selects input element which is not editable.
:read-write input:read-write Selects input elements that is editable.
:required input:required Selects input elements with a "required" attribute.
:root root Selects the document's root element.
:target #main:target Selects the current active #main element.
:valid input:valid Selects all input elements with a valid value.
:visited a:visited Selects all visited links.

More CSS Selectors

Simple CSS Selectors CSS Attribute Selectors CSS Attribute Value Selectors CSS Combinator Selectors CSS Pseudo Elements Selectors
Tags