1 Thing A Week 1 Thing
A Week

Understanding N-match notation in CSS

Week 183.0 — 26th April '21

Quite enjoyed episode 38 of The CSS Podcast which covered N-match notation, a selector I've worked with in CSS before but in all honesty it's one I Google every single time, which usually leads me to this page from CSS Tricks on :nth-child recipes.

Thanks to The CSS Podcast, now I get it!

annotated nth-child example for css

The nth count needs to come first, where n means every child, 2n equals every other (or every second) child, 3n equals every third child and so on.

The +1 part actually describes where to start. This is the bit I never really got. Maybe that's because CSS counters start from 1, rather than 0 like other languages. In all honesty, it felt like a dark art when it worked, but I had never seen or heard it explained this way. +0 actually means you should start at the child before the first one, so 2n+0 means every odd child would be selected (1, 3, 5, 7, 9 etc...) and 2n+1 means every even child would be selected (2, 4, 6, 8, 10 etc...).

The CSS Podcast is well worth a listen even if you think that you know a lot about CSS, I know I've learnt a lot over the past year as I've dipped in and out of it.

Here's a very short demo you can interact with. Change the values for the nth-child selector and see how it changes which values are highlighted green instead of blue.

More from 1 Thing A Week
« Some upcoming changes to the content on 1 Thing A Week Creating stop motion animations with an iPhone and Siri Shortcuts How to use the prefers media query in CSS »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 183.1 – Monday
    1. What 'Dark Patterns' Are – and Why California Banned Them businessinsider.com
  2. 183.2 – Tuesday
    1. Forté for iPhone   $39.99 twelvesouth.com
  3. 183.3 – Wednesday
    1. Where do company names come from kottke.org
  4. 183.4 – Thursday
    1. No cookie for you github.blog

Jump to notable items for Week #182, Week #184 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit