Summary - Interactive list

CSS course · Intermediate · Lesson 18/98

Build an interactive list interface with pseudo-classes.

Summary - Interactive list

In this summary, you will combine the pseudo-classes from this group to build an interactive list interface. Items will highlight on hover, odd positions get a light background, and inactive items look dim.

You will use:

li:hover — highlight on hover
li:nth-child(odd) — zebra stripe
li:not(.active) — dim the inactive

Combining pseudo-classes

Multiple pseudo-classes work side by side in one stylesheet. Each targets a different state; the browser applies them independently.

For instance, on list items you might want three things at once: highlight on hover (:hover), a zebra stripe (:nth-child(odd)) and dimmed inactive items (:not(.active)). You write three separate declarations; none breaks the other.

Exercise Write the interactive list styles

Write three declarations. First, a li:hover selector with background: #eef inside. Second, a li:nth-child(odd) selector with background: #f7f7f7 inside. Third, a li:not(.active) selector with color: #888 inside. Each should sit in its own { } block.

Show example solution

/* add the interactive list styles */
li:hover {
  background: #eef;
}
li:nth-child(odd) {
  background: #f7f7f7;
}
li:not(.active) {
  color: #888;
}

The power of pseudo-classes

In this group you saw how pseudo-classes capture an element's state and position. :hover and :focus give interaction, :nth-child gives order, :not and :is give filtering, :first-child and :last-child give the edges, :checked and :disabled give form states.

You can now build interfaces that respond to users with CSS alone. In the next groups you will combine these pseudo-classes with grid and flexbox layouts.

Test yourself

Which pseudo-class selects odd-position list items?
- li:first-child
- li:not(.active)
- li:nth-child(odd)
- li:hover
Show answer

li:nth-child(odd) — Correct. :nth-child(odd) matches the 1st, 3rd, 5th items.
Match each pseudo-class to its role in the list

:hover

Highlight on hover
:nth-child(odd)

Zebra stripe
:not(.active)

Dim the inactive
:focus

Keyboard focus

Summary - Interactive list