Combinators & Pseudo-classes

Real pages need selectors like "links inside the sidebar" or "every second row". Combinators connect elements by relationship, and pseudo-classes select by state — together they cover most day-to-day styling needs.

Combinators: selecting by relationship

.sidebar a        { color: #334155; }   /* all links in the sidebar */
.menu > li        { display: inline; }  /* only top-level items */
h2 + p            { margin-top: 0.5rem; } /* pull the intro closer */
.error input      { border-color: red; }

Expected output: in an erroring form, every input inside the .error container gets a red border — a whole-state style from one rule.

Pseudo-classes: selecting by state

A pseudo-class is a keyword after a colon that describes a condition rather than an attribute.

Interaction states

a:hover        { color: #4338ca; }
button:active  { transform: scale(0.97); }
a:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 3px;
}

Prefer :focus-visible over :focus for outlines — it shows the ring for keyboard users but not after mouse clicks, exactly what you want. Never remove outlines without a replacement (accessibility).

Structural pseudo-classes

li:first-child  { font-weight: 700; }
li:last-child   { border-bottom: 0; }
tr:nth-child(even) { background: #f8fafc; }   /* zebra stripes */
li:nth-child(3) { color: crimson; }           /* the third item */
li:not(.muted)  { opacity: 1; }

Expected output: a table body with alternating row colours — no extra classes in the HTML at all.

Form pseudo-classes

input:required   { border-left: 3px solid #f59e0b; }
input:disabled   { background: #e2e8f0; color: #94a3b8; }
input:checked    { accent-color: #4f46e5; }

Practical example: a styled navigation

<nav class="menu">
  <ul>
    <li><a href="/">Home</a></li>
    <li class="active"><a href="/tutorials">Tutorials</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

.menu ul         { display: flex; gap: 1.25rem; list-style: none; }
.menu a          { text-decoration: none; color: #334155; }
.menu li.active a,
.menu a:hover    { color: #4f46e5; }
.menu li + li::before { content: "·"; margin-right: 1.25rem; color: #94a3b8; }

The li + li::before rule adds a dot separator only between items (it uses the adjacent-sibling combinator plus a pseudo-element — the latter is next chapter). Expected output: a horizontal menu whose active and hovered items turn indigo.

Common mistakes

• Descendant where child was meant — .card a also hits links in nested cards. Use > when depth matters.
• Removing focus styles — outline: none without :focus-visible replacement locks keyboard users out.
• Over-specific selectors — .sidebar ul li a.icon svg is fragile; two descendant steps are usually enough.
• Using :hover for essential actions — phones have no hover; keep primary actions visible at all times.

Practice checklist

1. Add zebra striping to any table with tbody tr:nth-child(even).
2. Style a menu so the current page uses an .active class AND hover works — via one grouped selector.
3. Build an error state: give a container class .error and style every input inside with a single descendant selector.

Next: styles that exist without any element at all — Pseudo-elements & Attribute Selectors.