Structural pseudo-classes

:first-child and :nth-child — no extra classes needed

:first-child

1 — Summit Ridge (featured first child)
2 — Lake Loop
3 — Pine Cutoff
4 — Harbor Walk

li:first-child styles only the first item — stronger border, larger font-size, and more padding — without a special class (rule 47).

:nth-child(odd) / :nth-child(even) + :nth-child(3)

Row 1 — also :first-child (dark bar, larger type)
Row 2 — even stripe
Row 3 — odd stripe + :nth-child(3) teal border + bigger type
Row 4 — even stripe
Row 5 — odd stripe
Row 6 — even stripe

Zebra rows use background via :nth-child(odd/even). Row 3 also bumps font-size and weight with :nth-child(3) (rule 48).

Why this helps

No need for class="first" or class="alt" on every item
Patterns stay consistent when you add or remove list items
Combine with Flexbox column + gap when you want spaced cards instead of tight stripes

Rules 47–48 in ../rules.md. Back to interaction states: 01-basics.html.

Important HTML

List items can be targeted structurally.

<ul class="tile-list">
  <li class="tile">…</li>
</ul>

Important CSS

Structural pseudo-classes style repeating items.

.tile:nth-child(odd) { background: #f8fafc; }
.tile:hover { border-color: #0f766e; }