:nth-child(of S)

Stripes that stay right when rows are filtered

Caveatli:nth-child(odd of :not(.gone)) and li:not(.gone):nth-child(odd) are different selectors, and the second one is the reading most people arrive at. The first numbers within the kept rows, which is what striping wants. The second numbers among all siblings and then throws away the ones that do not match, so hiding two rows leaves two stripes in a row and it looks like a rendering bug rather than a selector you wrote.

FallbackAn engine without of S treats the whole selector as invalid and drops that rule, so the stripes disappear instead of landing on the wrong rows. A missing stripe is a much cheaper failure than a misleading one, which makes this safe to ship without a query.

/* numbers the rows that are kept */
li:nth-child(odd of :not(.gone)) {
  background: Canvas;
}

/* numbers all of them, then filters:
   two stripes end up side by side */
li:not(.gone):nth-child(odd) { }

Published 26 Aug 2026