Blog: Web Design
Repeating pattern

CSS: Using :nth-of-type() To Style Repeating Items

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

If you’re a developer, you’ve probably encountered a situation where you need to style items in a list.

Oftentimes, you might be called on to set up a repeating pattern of items in a grid — like mini-profile bios on an About Page, for example.

Let’s say you have a grid where each row has four items. You need to write a CSS rule which allows you to style these items as the screen size decreases for mobile.

You also need to be able to target just the first (or second, or third, or fourth) item in each row.

What’s the best way to style these items that also allows you to expand the list and keep the pattern?

Your first reaction might be to to use nth-child or nth-of-type to do this, using n and the multiplier in your style rule. This is what this would look like:


/* Target first of each four items in a list */
li:nth-of-type(n) {
}

/* Target second of each four items in a list */
li:nth-of-type(2n) {
}

/* Target third of each four items in a list */
li:nth-of-type(3n) {
}

/* Target fourth of each four items in a list */
li:nth-of-type(4n) {
}

Understanding :nth-of-type

nth-of-type is a CSS pseudo-selector that uses algebra to figure out what page elements to target. This particular selector uses a an + b formula, where n is the page element, a is the multiplier, and b is an integer added to the element multiplier.

To illustrate how you’d use this formula to target even and odd list items, check out the following CSS:


/* Target every EVEN numbered list item */
li:nth-of-type(2n) {
}

/* Target every ODD numbered list item */
li:nth-of-type(2n+1) {
}

So, if you’re just running every possible integer through n in the example above, every even number will match the first rule.


/* What :nth-of-type(2n) matches */
(2 * 0) = 0
(2 * 1) = 2
(2 * 2) = 4
(2 * 3) = 6
etc....

In the same fashion, if you run every possible integer through n in our style rule for odd, you’ll get every odd number from this equation.


/* What :nth-of-type(2n+1) matches */
((2 * 0) + 1) = 1
((2 * 1) + 1) = 3
((2 * 2) + 1) = 5
((2 * 3) + 1) = 7
etc....

Where Our Original List Rule Breaks Down

So, let’s go back to our original goal, styling a grid of items, that have four items in each row.

Here was our original idea again:


/* Target first of each four items in a list */
li:nth-of-type(n) {
}

/* Target second of each four items in a list */
li:nth-of-type(2n) {
}

/* Target third of each four items in a list */
li:nth-of-type(3n) {
}

/* Target fourth of each four items in a list */
li:nth-of-type(4n) {
}

This would work great…except for one thing.

Our rule that targets every 2n item also targets every fourth item.

You can test this using the handy-dandy :nth Tester put together by Chris Coyier of CSS-Tricks fame.

A Better Solution

Here’s a way we can solve our list item problem without writing convoluted CSS override rules.

Let’s account for our list grid size in our formula.


/* Target first of each four items in a list */
li:nth-of-type(4n+1) {
}

/* Target second of each four items in a list */
li:nth-of-type(4n+2) {
}

/* Target third of each four items in a list */
li:nth-of-type(4n+3) {
}

/* Target fourth of each four items in a list */
li:nth-of-type(4n+4) {
}

What did we do different here?

The major thing we changed was adding a base multiplier and adding the list position number we want to target, instead of trying to target just the multiplier by itself.

As lists grow bigger, our original multipliers (Integer(n)) can also trigger CSS rule conflicts that would be problematic.

Here’s how the new math plays out.


/* :nth-of-type(4n+1) - First Item (of Four) */
((4 * 0) + 1) = 1
((4 * 1) + 1) = 5
((4 * 2) + 1) = 9
((4 * 3) + 1) = 13

/* :nth-of-type(4n+2) - Second Item (of four) */
((4 * 0) + 2) = 2
((4 * 1) + 2) = 6
((4 * 2) + 2) = 10
((4 * 3) + 2) = 14

/* :nth-of-type(4n+3) - Third Item (of four) */
((4 * 0) + 3) = 3
((4 * 1) + 3) = 7
((4 * 2) + 3) = 11
((4 * 3) + 3) = 15

/* :nth-of-type(4n+4) - Fourth Item (of four) */
((4 * 0) + 4) = 4
((4 * 1) + 4) = 8
((4 * 2) + 4) = 12
((4 * 3) + 4) = 16

Learn Once, Use Everywhere

This formula can work for a list of any size, or a grid of any variety.

Here’s how you’d style a list with three items in each row of the grid.


/* Target first of each three items in a list */
li:nth-of-type(3n+1) {
}

/* Target second of each three items in a list */
li:nth-of-type(3n+2) {
}

/* Target third of each three items in a list */
li:nth-of-type(3n+3) {
}

Need to style a grid of items with five items in each row? Here’s what that would look like.


/* Target first of each five items in a list */
li:nth-of-type(5n+1) {
}

/* Target second of each five items in a list */
li:nth-of-type(5n+2) {
}

/* Target third of each five items in a list */
li:nth-of-type(5n+3) {
}

/* Target fourth of each five items in a list */
li:nth-of-type(5n+4) {
}

/* Target fifth of each five items in a list */
li:nth-of-type(5n+5) {
}

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

Join the Conversation

Your email address will be kept private. Required fields marked *.