“What we call chaos is just patterns we haven’t recognized. What we call random is just patterns we can’t decipher.” ― Chuck Palahniuk
I’ve been trying to wrap my head around how the :nth-child
pseudo-class can be used to create repeating patterns with CSS, beyond just even
and odd
(which are perfect for zebra-striping table rows, amongst other things). What really helped me understanding it was coding up a few examples to play around with. These examples are all available on CodePen too, so you can fork or edit them there if you want. I’ll embed the pen at the bottom. Note that while I will use :nth-child
for all of the examples below, they should all work just as well with the :nth-of-type
pseudo-class. Continue reading “Repeating patterns in CSS with :nth-child and :nth-of-type”