? CSS Pseudo-classes

✨ Quick Overview

CSS pseudo-classes let you style elements based on their state (like hover or focus) or position (like first child) without adding extra classes or JavaScript.

Think of them as “conditional styles” that are applied only when something special is true about an element.

? Key Concepts

• :hover — when the mouse pointer is over an element.
• :focus — when an element (usually input) is focused via click or keyboard.
• :first-child — targets the first child of a parent.
• :nth-child(n) — targets elements based on their index (e.g., odd/even rows).
• :disabled — matches disabled form controls.

? Syntax & Theory

Basic syntax for a pseudo-class:

/* Basic pseudo-class syntax pattern */
selector:pseudo-class {
  property: value;
}

You attach the pseudo-class after the selector using a colon (e.g., a:hover, input:focus).

?️ :hover

:hover applies styles when the mouse pointer is over an element. Commonly used for buttons, links, and interactive cards.

/* Change link color and underline only on hover */
a:hover {
  color: #dc3545;
  text-decoration: underline;
}

? :focus

:focus targets an element when it gains focus via mouse click or keyboard (Tab key). It is very important for accessibility.

/* Highlight input when user focuses on it */
input:focus {
  border-color: #28a745;
  outline: none;
  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}

? :first-child

:first-child selects the first child of its parent. Great for styling the first item in a list or the first paragraph in a section.

/* Make the first list item stand out */
li:first-child {
  font-weight: bold;
  color: #007bff;
}

? :nth-child(n)

:nth-child(n) styles elements based on their position. You can use numbers, formulas like 2n, or keywords like odd and even.

/* Color every odd list item (1st, 3rd, 5th, ...) */
li:nth-child(odd) {
  background-color: #f0f8ff;
}

? :disabled

:disabled selects disabled form elements like inputs and buttons. Use it to show that a control cannot be used.

/* Style disabled buttons to look inactive */
button:disabled {
  background-color: #cccccc;
  color: #6b7280;
  cursor: not-allowed;
}

? Combined Pseudo-class Example

You can combine multiple pseudo-classes to create rich interactions, such as different styles on hover, focus, and disabled states.

/* Button styles using multiple pseudo-classes */
.button {
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: none;
  background-color: #2563eb;
  color: #ffffff;
}

.button:hover {
  background-color: #1d4ed8;
}

.button:focus {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.button:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}