A simple CSS solution to select ranges of content

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:40 - nth-of-type basics
01:50 - counting backward with nth-of-type
02:40 - selecting a range by combining both methods
03:53 - limitation of nth-of-type
05:15 - nth-child “type of” syntax

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[classicdrumpercussion]

wow, you are a Css magician. Thanks for such rich knowledgeable content

[richt]

If the (n...) part of the selector is confusing, it's useful to count up from 0 and work out the number that the selector resolves to.

For example with n+2: n=0 resolves to 0+2; n=1 resolves to 1+2, etc. So we end up with nth-child(2), nth-child(3)... the 2nd child onwards.

With -n+4: n=0 resolves to 0+4; n=1 resolves to -1+4, etc. So we end up with nth-child(4), nth-child(3)... the first 4 children.

With 2n: n=0 resolves to 0; n=1 resolves to 2, etc. So we end up with nth-child(0), nth-child(2)... every 2nd child.

[tonyr.]

Fantastic! I read A List Apart’s article on CSS quantity queries when it came out, but I could never remember how to do it without looking up the article again. This live demo makes things “click” in my head better.

And of course, the brand new syntax is *spectacular*!

Thanks! May The Source™ be with you 🖖🏽

[donniedamato]

I'd suggest avoiding color as the standout for the example and consider border style instead. I'm color-blind and some of the changes are not easy to see.

[AugustinHiebel]

Great discovery! Thanks a lot for the walkthrough

[easysolutions]

Thanks for the video Sir, your videos are awaited everyday ❤

[PascalHorn]

Oh that :nth-child(2n of .box) is amazing. Have a use case for this, and fortunately it‘s in the backend, so I can use it without concern for a fallback. Thanks Kevin, that‘s a really neat trick. 😊

[QuantumCanvas]

With this level of consistency it seems like this man can build a full blown GTA game just in CSS.

[intsfanatic]

Where can i find the video about the grid images @0:06?

[titusayyasamy]

Thanks for this useful selection tips🙂

[deepjasoliya]

First time happened that I knew everything about things you talked in video😁

[pascalmaranus]

When I saw that video you referenced, I was so blown away by being able to select negatively, I was just blown away by it.
I don't have an immediate use case for it right now, but it's SO awesome to know I won't have to have to do i.e. 6 lines of :nth-of-type(1), :nth-of-type(2), etc. any more.

I do often have to insert something that has something like 5 boxes in a row, where one will have the "active" class. That active class gets updated when you click on one of the boxes. Would it be possible to get a good selection of everything before the .active box, or would I still have to stick to adding in a .has-active class if there is any selected box and then have the same default style applied on ".active ~ .box" ?

[mathew-sunny]

Can we use custom properties inside nth selectors?

[VideoNOLA]

Is there a way to select individual grid "cells". Think I saw you do that once, and I need to go ask Gemini what that was all about.

[ChuckHirstius]

Is there a way to get and use the count of items selected? As in I want to select "up to" the first 5 children but it might be any number from 1-5 and I want to use the "count" of the currently selected children in a calculation - I've found a hack to do this, but I am curious if there's a more elegant way

[brnto]

I wish we had access to `n` inside the style block though so we can do calculations of which part col and row to place the images. It would have massively reduced the duplication

[makiroll]

I'm interested whether in a JS app it's better to use js method in terms of simpleness or use this more advanced css method which some dev may not understand

[KonRud]

I believe that `.box:nth-of-type(-1n +6)` could be simplified a bit by just using `-n` as in `.box:nth-of-type(-n +6)`

[randmtv]

Looking at caniuse, I'm actually surprised Safari had this since 2015 and I'm surprised it took other browsers so long to implement this. Most of the time Safari isn't the first one to implement things.

[lukemartinau]

IMO an :nth-of-class() would be sooo helpful. I know we can use :nth-of-type(2 of .box) but is safari only.