Pseudo-Classes

A pseudo-class targets an element based on a condition that is not part of the HTML — a user’s action, an element’s position in a list, or a relationship to its siblings. Pseudo-classes use a single colon (:) prefix.

State-based pseudo-classes

These respond to what the user is doing or what has happened to an element.

:hover

Applies when the user’s cursor is over an element.

nav a:hover {
  color: #b8d4a0;
  text-decoration: underline;
}

When the cursor moves away, the element returns to its non-hover state. :hover is one of the simplest ways to make a page feel interactive.

:focus

Applies when an element has keyboard or click focus — when a user has tabbed to it or clicked into it.

input:focus {
  outline: 2px solid #2c4a1e;
  outline-offset: 2px;
}

Focus styles are critical for keyboard accessibility. Never remove them entirely with outline: none unless you replace them with a custom visible alternative. Keyboard users depend on focus indicators to know where they are on the page.

:active

Applies during the moment a user is pressing and holding a click on an element.

button:active {
  background-color: #1a3a12;
}

The :active state lasts only as long as the click is held — it provides visual feedback that the element responded.

:visited

Applies to links the user has already visited.

a:visited {
  color: #6a8c52;
}

Note: browsers restrict what CSS properties :visited can change for privacy reasons — color is allowed, but many layout and background properties are not.

Position-based pseudo-classes

These target elements based on their position among siblings.

:first-child and :last-child

Target an element only when it is the first or last child of its parent.

.tour-card:first-child {
  margin-top: 0;
}

.tour-card:last-child {
  margin-bottom: 0;
}

This is useful for removing extra margins at the start or end of a list — without adding and removing classes manually.

:nth-child(n)

Targets elements at a specific position or in a repeating pattern.

/* Every even-numbered tour card */
.tour-card:nth-child(even) {
  background-color: #f0ebe4;
}

/* Every third element */
li:nth-child(3n) {
  font-weight: bold;
}

/* The second item specifically */
li:nth-child(2) {
  color: #2c4a1e;
}

The n in nth-child is a formula. even and odd are keywords. Numbers target specific positions. 3n means every third item. 3n+1 means starting from the first, then every third after that.

:not()

Excludes elements that match the selector inside the parentheses.

/* All nav links except the active one */
.site-nav a:not(.active) {
  opacity: 0.8;
}

/* All inputs except checkboxes */
input:not([type="checkbox"]) {
  border: 1px solid #ccc;
}

:not() is useful when it is easier to describe what you do not want to style than what you do.

Combining pseudo-classes with other selectors

Pseudo-classes chain onto any selector:

.tour-card:hover { }          /* class + pseudo-class */
nav a:hover { }               /* combinator + pseudo-class */
li:nth-child(odd):hover { }   /* multiple pseudo-classes */

Exercise

Add these pseudo-class styles to your Summit Trail Outfitters stylesheet:

1. Hover on nav links — change the link color when hovered:

.site-nav a:hover {
  color: #b8d4a0;
}

2. Focus on form inputs — add a visible outline when a contact form field is focused:

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #2c4a1e;
  outline-offset: 2px;
}

3. Remove margin from the first tour card so it sits flush against the section heading:

.tour-card:first-child {
  margin-top: 0;
}

Test each one in the browser: hover over nav links, tab through form fields, and observe the first tour card’s spacing. Open DevTools and observe the pseudo-class states in the Styles panel — you can force :hover and :focus states using the element state toggle.

Recap

• Pseudo-classes use a single colon (:) and target elements based on state or position.
• :hover styles elements when the cursor is over them.
• :focus styles elements with keyboard or click focus — never remove focus styles without replacing them.
• :active applies during the moment of a click.
• :first-child, :last-child, :nth-child(n) target elements by position among siblings.
• :not() excludes specific elements from a rule.
• Pseudo-classes chain onto type, class, and combinator selectors.