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

When to use it

A claims queue marks withdrawn records with hidden while keeping them in the DOM for a temporary review filter. Alternating backgrounds should apply to the remaining visible list items in their current source order. The sample counts direct li children that are not hidden. If the of selector syntax is unsupported, the list stays readable without striping. Test zero, one, and many visible records; hide the first row and a middle row to confirm the parity shifts as expected. If the application instead hides rows through a class or CSS display none, this selector will still count them unless the filter matches that state; choose one source-of-truth convention. Do not use stripes to convey approval or urgency. Screen readers need meaningful row text and headings, and keyboard focus must not land on rows a filter claims are unavailable. Repeated DOM moves can cause layout and focus changes unrelated to this CSS rule.

.claim-queue > li { background: #fff; }
.claim-queue > li:nth-child(even of :not([hidden])) { background: #edf4f7; }
.claim-queue > li:focus-within { outline: 2px solid #1c5e87; outline-offset: 2px; }

Cost and verification

Selector matching is cheap on an ordinary list. The main cost is reasoning about which siblings are counted after filtering and whether the hidden attribute is applied consistently. Avoid loading thousands of DOM rows merely because CSS can stripe them; paging or virtualization is an application decision, with its own accessibility work. Test target browsers for the of syntax, since older engines may ignore that rule and show a plain list. A fallback base background preserves readability. Do not substitute row parity for data state or rely on alternating color as the only separator when printed or viewed in forced colors.

Common Mistakes

• Do not confuse li:nth-child(even of .active) with li.active:nth-child(even).
• Do not count a CSS-hidden class unless the filter selector accounts for it.
• Do not let a missed stripe change the meaning of a record.

Connected lessons

• CSS Property Decisions
• CSS structural selectors: style repeated items without hard-coded positions
• CSS attribute selectors: target explicit document state
• CSS :focus-within: mark the active field group
• HTML lists: choose ordered, unordered, or term-description structure