What is a pseudo-class?

A pseudo-class in CSS is a keyword added to a selector that indicates a special state of the selected element. It allows styling elements based not only on their structure (e.g., tag or class) but also on their current state or interaction with the user.

Examples of pseudo-classes:

• :hover — for styling an element when the mouse pointer hovers over it.
• :active — for styling an element at the moment of activation (e.g., when clicking a mouse button).
• :focus — for styling an element when it is in input focus (e.g., a form field).
• :visited — for styling a visited link.
• :first-child — for styling the first child element in a group of similar elements.
• :nth-child(n) — for styling the nth child element.

Pseudo-classes are used in CSS rules after a regular selector, for example:

/* Style for a link on hover */
a:hover {
  color: blue;
}

/* Style for the first paragraph */
p:first-child {
  font-weight: bold;
}