Repeating patterns in CSS with :nth-child and :nth-of-type

“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.

Example #1

Repeating 3-item pattern…

[css]
div:nth-child(3n+1){
background: #FF7100;
}
div:nth-child(3n+2){
background: #FFB173;
}
div:nth-child(3n+3){
background: #A64A00;
}
[/css]

The equation passed into nth-child above is basically (an+b), where n={0,1,2,3...} (that is, n is a set of all positive integers).

So when we substitute in all the values of n then the first selector above evaluates to nth-child(3*0+1) or nth-child(1), then nth-child(3*1+1) or nth-child(4), then nth-child(3*2+1) or nth-child(7) and so on.

The second selector evaluates to nth-child(3*0+2) or nth-child(2), then nth-child(3*1+2) or nth-child(5), then nth-child(3*2+2) or nth-child(8) and so on.

And following the same pattern the 3rd selector results in nth-child(3), nth-child(6), nth-child(9), and so on.

Below are a couple more examples.


Example #2

Repeating 4-item pattern…

[css]
div:nth-child(4n+1){
background: #ccc;
}
div:nth-child(4n+2){
background: #999;
}
div:nth-child(4n+3){
background: #666;
}
div:nth-child(4n+4){
background: #333;
}
[/css]


Example #3

Repeating 7-item pattern…

[css]
.ex3 div:nth-child(7n+1){
background: red;
}
.ex3 div:nth-child(7n+2){
background: orange;
}
.ex3 div:nth-child(7n+3){
background: yellow;
}
.ex3 div:nth-child(7n+4){
background: green;
}
.ex3 div:nth-child(7n+5){
background: blue;
}
.ex3 div:nth-child(7n+6){
background: indigo;
}
.ex3 div:nth-child(7n+7){
background: violet;
}
[/css]


Learn more about :nth-child

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element.

This can more clearly be described this way: the matching element is the bth child of an element after all its children have been split into groups of a elements each.

The values a and b must both be integers, and the index of an element’s first child is 1.

In other words, this class matches all children whose index fall in the set { an + b; n = 0, 1, 2, … }.

nth-child, Mozilla Developer Network

Also more at CSS-Tricks: There is a CSS selector, really a pseudo-selector, called nth-child.

UPDATE: Another must-see resource: Master of the :nth-child

CodePen Style

Check out this Pen!

6 Replies to “Repeating patterns in CSS with :nth-child and :nth-of-type”

  1. Thank You, I was trying to align left, center, right progressively using nth-of-type just for sake of doing it for about an hour yesterday. Excellent example here not commonly found.

  2. This post saved me when trying to create a repeating pattern of 6 colors. AND, I learned some fundamentals of how nth-child works. GREAT job!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.