Pseudo-Class Selectors - CSS Essentials

← Previous: Home Page Next: Layout Methods →

Pseudo-classes let you style elements based on user interaction and where an element sits in the DOM.

:hover :focus :active :nth-child() :first-child/:last-child

:hover

Applies when the pointer is over an element.

/* Base Style */
.ps-page .demo-button {
  padding: 1rem 2rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* Pseudo Class */
.ps-hover .demo-button:hover {
  background: var(--primary-dark);
}

Try it

:focus

Applies when an element is focused (keyboard/tab or click). Great for accessibility.

/* Base Style */
.ps-page .demo-input {
  width: 100%;
  max-width: 400px;
  padding: 0.875rem;
  font-size: 1rem;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
}

/* Pseudo Class */
.ps-focus .demo-input:focus {
  border-color: var(--primary);
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

Try it

:active

Applies while you are pressing/clicking an element.

/* Base Style */
.ps-page .demo-button {
  padding: 1rem 2rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* Pseudo Class */
.ps-active .demo-button:active {
  transform: translateY(1px);
  background: var(--primary-dark);
}

Try it

:nth-child()

Targets elements by position. Example: style odd/even rows.

/* Base Style */
.demo-item {
  padding: 1rem;
  margin-bottom: 0.5rem;
  border-radius: 6px;
  font-weight: 600;
  text-align: center;
}

/* Pseudo Class */
.demo-item:nth-child(odd) {
  background: var(--primary);
  color: white;
}

.demo-item:nth-child(even) {
  background: var(--accent-2);
  color: var(--dark);
}

Try it

Item 1

Item 2

Item 3

Item 4

Item 5

:first-child & :last-child

Style the first/last item differently (menus, lists, chips).

/* Base Style */
.list-item {
  padding: 1rem;
  background: #e0e0e0;
  color: var(--dark);
  margin-bottom: 8px;
  text-align: center;
  border-radius: 6px;
}

/* Pseudo Class */
.list-item:first-child {
  background: var(--primary);
  color: white;
}

.list-item:last-child {
  background: var(--accent-2);
  color: var(--dark);
}

Try it

First

Middle

Last

Quick Reference

Pseudo-Class	Triggers When	Common Use
`:hover`	Pointer is over element	Hover feedback
`:focus`	Element is focused	Accessible focus styles
`:active`	Element is being pressed	Pressed state
`:nth-child(n)`	Matches by index	Striped lists/tables
`:first-child`	First child in container	First item styling
`:last-child`	Last child in container	Last item styling

Summary

:hover adds hover feedback.
:focus is key for keyboard accessibility.
:active covers pressed state.
:nth-child() targets positions/patterns.

← Previous: Home Page Next: Layout Methods →