CSS Pseudo-Classes

Introduction

CSS pseudo-classes target elements in a specific state — hover, focus, clicked, first child, last child, etc. They let you style dynamic behaviors without JavaScript.

1. :hover

button:hover {
  background-color: #00ff99;
}

2. :active

When the user clicks or holds the element.

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

3. :focus

Triggered when an element receives keyboard or click focus.

input:focus {
  border-color: #64b5f6;
}

4. :checked

Used for radio buttons, checkboxes, and switches.

input[type="checkbox"]:checked {
  accent-color: #00ff7f;
}

5. :disabled

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

6. :first-child / :last-child

ul li:first-child {
  color: #00ff99;
}

ul li:last-child {
  color: #ff6666;
}

7. :nth-child()

table tr:nth-child(odd) {
  background: #1f1f1f;
}

table tr:nth-child(even) {
  background: #2b2b2b;
}

8. :not()

button:not(.primary) {
  background: #333;
}

9. :target

Used with anchor links.

#info:target {
  background: #222;
  border-left: 4px solid #64b5f6;
}

10. :root

Targets the HTML root — great for CSS variables.

:root {
  --accent: #00ff99;
}

h1 {
  color: var(--accent);
}

11. :valid / :invalid

input:invalid {
  border-color: red;
}

Summary