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

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