Neon DistrictISSUE #21 of 50

pseudo-classes · :nth-child · :nth-of-type

PrismaVSJank the Janitor

Prisma says:nth-child() and :nth-of-type() select elements by position with formulas like 2n or odd.

:nth-child(odd) stripes rows; :nth-child(3n) hits every third item; :nth-child(2) the second. :nth-of-type() counts only same-tag siblings. There's also :first-child, :last-child, :only-child for the common cases.

Power-ups you unlock

:nth-child(odd | even | 2n | 3n+1 …)
:nth-of-type counts same-tag siblings
first-child / last-child / only-child shortcuts
Great for zebra stripes and grid rhythms

Jank the Janitor attacks — common mistakes

Expecting :nth-child to ignore other element types
Off-by-one in an+b formulas
nth-child on mixed element lists unexpectedly

Boss battleStripe a list with :nth-child(even) and color every third item with :nth-child(3n).

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>li{list-style:none;padding:6px;color:#e6e0ff}li:nth-child(even){background:#140a28}li:nth-child(3n){color:#b388ff}</style></head><body style="background:#06040d;padding:20px"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></body></html>

▶ Open the interactive comic issue

‹ Pseudo-Classes · :Hover · :Focus · :Active Pseudo-Classes · :Is() · :Where() · :Not() ›