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 :).
How was it for you? Let me know on BlueSky or Mastodon
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.
Join the Ninja Sparks Newsletter!