CSS structural selectors: style repeated items without hard-coded positions

How the rule works

A case timeline alternates a subtle separator between entries. A structural selector can mark every item after the first without adding a class to each generated row. The rule depends on the list's direct-child structure, so adding a wrapper changes which elements it matches. If the design wants a special urgent item, use a data state or class instead; urgency is not determined by its position. Keep the CSS decoration separate from the ordered sequence conveyed by the list markup. Test empty, single-item, and many-item timelines to confirm the first and last boundaries.

.case-timeline > li + li { border-block-start: 1px solid #b7c4d1; }
.case-timeline > li:nth-child(2n) { background-color: #f4f7fa; }
.case-timeline > li { padding-block: .75rem; }

Cost and verification

The rules are cheap for a short list. Long lists cost more through DOM size and layout than through these selectors; use pagination or virtualization only when measurement warrants it. Background striping may vanish in forced colors, so the list must remain readable without it. The adjacent-sibling border communicates separation without relying on a specific number of rows.

Common Mistakes

• Do not use nth-child to encode a business status.
• Do not assume a wrapper can be inserted without changing direct-child matching.
• Do not use alternating color as the only way to identify a row.

Connected lessons

• CSS Selectors
• CSS combinators: select relationships without encoding every wrapper
• CSS pseudo-classes: style interaction states without hiding them
• HTML lists: choose ordered, unordered, or term-description structure

Further native-state decisions

• CSS :nth-child(of selector): count only the rows that match