CSS Pseudo-classes

When we design modern websites, we often need to style elements not only based on their structure but also based on their state, user interaction, or position in the DOM. That’s exactly where CSS pseudo-classes are super useful.

A pseudo-class is a keyword added to a selector that defines a special state of an element. It allows you to apply styles dynamically — for example, when a user hovers over a button, focuses on an input field, or when an element is the first or nth child of its parent.

Why Pseudo-classes Are Important?

• They improve interactivity (hover effects, focus styles, active states).

• They enhance user experience and accessibility.
• They reduce the need for JavaScript for simple interactions.
• They give designers fine control over styling specific elements.

Commonly Used CSS Pseudo-classes

:hover – When User Points at an Element

• Triggered when the mouse pointer hovers over an element.
• Commonly used for buttons, links, images, or interactive components.

Example:

button:hover {
  background-color: #007BFF;
  color: #fff;
}

:focus – When an Element Gains Focus

• Applied when an element (like an input or button) is focused, either by mouse click or keyboard navigation (Tab key).
• Helps accessibility by showing users which field is active.

Example:

input:focus {
  border: 2px solid blue;
  outline: none;
}

:active – While Element is Being Clicked

• Represents the moment when a user clicks and holds down on an element (like a button or link).

Example:

a:active {
  color: red;
}

:nth-child() – Target Elements Based on Position

• Lets you style elements based on their order within a parent.
• Supports formulas like even, odd, or custom (2n+1) patterns.

Example:

li:nth-child(odd) {
  background: #f2f2f2;
}

:first-child and :last-child

• :first-child → Styles the first element inside a parent.
• :last-child → Styles the last element inside a parent.

Example:

p:first-child {
  font-weight: bold;
}
p:last-child {
  color: gray;
}

:checked – For Form Inputs

• Applied to checkboxes, radio buttons, or select options when they are selected.

Example:

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

:not() – Negation Pseudo-class

• Selects elements that do not match a certain selector.

Example:

​
p:not(.highlight) {
  color: black;
}

​

Flow of Common Pseudo-classes

CSS Pseudo-classes List