Calculating nth-child CSS Selector Formulae

I did quite a lot of maths at school. I wasn’t amazing at it but because I knew I wanted to work in computers I thought it would be handy. Fast forward 16 years and I now realise that I’ve forgotten most of it. I can still do the basics – and having developed a few different video games I can still do some basic maths related to physics & mechanics. But there’s plenty that I don’t remember.

Today I wanted to calculate a formula for an nth-child selector using css. I understand the principals, but because the pattern was strange I was getting a bit confused. Eventually I found a maths website that explained a simple way to create formulae for simple number patterns so I thought I’d document so I have something to refer to in the future.

For more info on nth-child selectors check out this post on CSS Tricks about how nth-child selectors work

The pattern I was working with was 2, 6, 10, 14, 18 … – I had a starting point (which wasn’t 1) and a consistent difference between the items.

How to Turn a Pattern Into a Formula

The formula is a + ( n - 1 ) * d where:

  • a = first number in the sequence
  • n = multiplier (the same n we already use in css formulae)
  • d = common difference between numbers in the pattern

Applying this to the pattern I showed earlier means a = 2 (the first number in the sequence), and d = 4 (the common difference between the numbers in the sequence).

Which then means we do the following:

a + (n - 1) * d =
2 + (n - 1) * 4 =
2 + (4n - 4) =
4n - 2

So my nth-child selector ended up being 4n – 2. In hindsight it was pretty straight forward – but it took far too long to work out so I’m glad I have a nice simple method for calculating these things in the future :).

Let me know what you think on Mastodon, or BlueSky (or Twitter X if you must).

Link to this page

Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.

Related Posts

03 Jun 2010

CSS Only Button – Redux

The other day, a post was published on Hongkiat showing how to make a button using CSS (Cascading Style Sheets) only. However, it was misleading as the CSS-only button also used JavaScript and an image or two. It was actually...
25 Dec 2012

Learning to Accept CSS3: Creating CSS3 Windows

People are resistant to change. It’s strange since I consider myself quite forward thinking, but I still find it takes me a while to accept new things. I’ve been using CSS3 effects for quite a while now – as have...
13 Jul 2009

Fussing over the (web design) details

Having spent the last couple of months (on and off) messing around with the new Binary Moon design I am now at the stage where I want to say it’s finished and move on to something else.There’s a well known...
12 Apr 2013

My First Website

My first website was terrible. Not intentionally I hasten to add – but because I was told to make it bad…I started university in 1998, the internet was just starting to become more mainstream. It was still a few years...
20 Jul 2016

Empathy in Web Design

I wasn’t able to make WordCamp Europe this year, but they’ve been really quick at getting all of the talks online, and so I have been watching some of them – and this one stood out.Morten Rand-Hendriksen is an experienced...
05 Oct 2021

Randomness with PHP

When I was making my generative art I needed to generate a lot of random things. The simplest way to do that with PHP is to use the rand() function.The rand() function selects a random integer (whole number) between 0...