Pseudo-class

A pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). This state is not based on the element’s attributes or content, but on external factors such as user interaction, the position of the element in the document, or the state of a sibling element.

Pseudo-classes are used to apply styles to elements that are not permanently in a certain state, but rather change state depending on user actions or other dynamic factors. For example, a link can have a different style when the user hovers over it, indicating that it is clickable. Pseudo-classes can also be used to select elements based on their position in the document or their relationship to other elements.

Pseudo-classes are typically added to the end of a selector, preceded by a colon (:). Some pseudo-classes take arguments, which are included in parentheses after the keyword.

Common pseudo-classes

:hover

The :hover pseudo-class is used to apply styles to an element when the user hovers over it with the mouse pointer. This is often used to provide visual feedback when an element is clickable, such as changing the color or background of a link.

a:hover {
  color: red;
}

:active

The :active pseudo-class is used to apply styles to an element when it is being clicked or otherwise activated. It is often used in conjunction with the :hover pseudo-class to provide a visual indication that the element is being interacted with.

a:active {
  color: green;
}

:focus

The :focus pseudo-class is used to apply styles to an element when it receives focus, such as when it is selected with the keyboard or through a touch interface. This is often used to provide visual feedback when an element is interactive, such as changing the outline or background of a form input field.

input:focus {
  outline: 1px solid blue;
}

:first-child and :last-child

The :first-child and :last-child pseudo-classes are used to select the first or last child element of a parent element, respectively.

li:first-child {
  list-style-type: none;
}

li:last-child {
  margin-bottom: 0;
}

:nth-child

The :nth-child pseudo-class is used to select an element based on its position among its siblings. It takes a formula as an argument, which specifies the pattern of elements to select. For example, :nth-child(odd) selects all elements that are in an odd-numbered position among their siblings.

li:nth-child(odd) {
  background-color: lightgray;
}

:nth-of-type

The :nth-of-type pseudo-class is similar to :nth-child, but only matches elements of a certain type. For example, p:nth-of-type(2) selects the second <p> element among its siblings.

p:nth-of-type(2) {
  font-weight: bold;
}

:not

The :not pseudo-class is used to select all elements that do not match a certain selector. It takes a selector as an argument, which specifies the elements to exclude. For example, :not(.highlight) selects all elements that do not have the class “highlight.

p:not(.highlight) {
  color: gray;
}

Browser support

Pseudo-classes are widely supported by modern web browsers, including Chrome, Firefox, Safari, and Edge. However, older browsers may not support some of the more advanced pseudo-classes or may have bugs when rendering them.