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!
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||Some use cases for the :has() selector in CSS||How to use the prefers media query in CSS »|
You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit