CSS Pseudo-classes

A CSS pseudo-class selects an element based on its condition, position, or user interaction.

For example, a button can change colour when a user places the mouse pointer over it.

button:hover {
  background-color: blue;
}

A pseudo-class begins with a colon (:) and is added after a selector.

selector:pseudo-class {
  property: value;
}

User Interaction Pseudo-classes

These pseudo-classes apply styles when users interact with an element.

• :hover selects an element when the pointer is over it.
• :active selects an element while it is being clicked.
• :focus selects an input or another element when it becomes active.

button:hover {
  background-color: #1f4ed8;
  color: white;
}

button:active {
  transform: scale(0.95);
}

input:focus {
  border-color: #1f4ed8;
  outline: 2px solid lightblue;
}

These styles provide visual feedback and help users understand what is happening.

Link Pseudo-classes

Links can have different styles depending on their current state.

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
}

a:active {
  color: orange;
}

The pseudo-classes have the following purposes:

• :link selects links that have not been visited.
• :visited selects previously visited links.
• :hover selects a link under the pointer.
• :active selects a link while it is being clicked.

Form Pseudo-classes

Form pseudo-classes style fields according to their condition.

input:required {
  border-left: 4px solid orange;
}

input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

input:disabled {
  background-color: #ddd;
}

Common form pseudo-classes include:

• :required selects fields that must be completed.
• :optional selects fields that are not required.
• :valid selects fields containing acceptable information.
• :invalid selects fields containing unacceptable information.
• :checked selects chosen checkboxes or radio buttons.
• :disabled selects fields that users cannot access.

Here is an example for a selected checkbox:

input[type="checkbox"]:checked {
  accent-color: green;
}

Position-based Pseudo-classes

These pseudo-classes select elements according to their position inside a parent.

li:first-child {
  color: green;
}

li:last-child {
  color: red;
}

li:nth-child(2) {
  font-weight: bold;
}

In this example:

• :first-child selects the first list item.
• :last-child selects the last list item.
• :nth-child(2) selects the second list item.

You can also select every even or odd element:

tr:nth-child(even) {
  background-color: #f2f2f2;
}

This creates alternating background colours in a table.

Type-based Pseudo-classes

Type-based pseudo-classes check an element's position among siblings of the same HTML type.

p:first-of-type {
  font-weight: bold;
}

p:last-of-type {
  margin-bottom: 0;
}

p:nth-of-type(2) {
  color: blue;
}

Unlike :nth-child(), :nth-of-type() only counts elements with the same tag name.

The :not() Pseudo-class

The :not() pseudo-class selects elements that do not match a given selector.

button:not(.primary) {
  background-color: gray;
}

This styles every button except those with the primary class.

The :empty Pseudo-class

The :empty pseudo-class selects elements without text or child elements.

.message:empty {
  display: none;
}

This hides an empty message box.

Pseudo-classes make pages more interactive without changing the HTML or adding JavaScript. They are useful for links, buttons, forms, lists, tables, and many other elements.