A simple CSS solution to select ranges of content

[@richt15]

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.

[@classicdrumpercussion1608]

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

[@tonyr.6637]

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 🖖🏽

[@KevinPowell]

Thank you so much!

[@easysolutions8628]

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

[@AugustinHiebel]

Great discovery! Thanks a lot for the walkthrough

[@deepjasoliya9137]

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

[@kaustavroy6542]

Just awesomely explained 🎉

[@titusayyasamy3035]

Thanks for this useful selection tips🙂

[@intsfanatic]

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

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

[@KevinPowell]

Thanks for pointing that out, I'll definitely take it into account next time. Sorry for making it more difficult to follow than it needed to be

[@anirbanpatra3017]

​@@KevinPowell nth-of-type often doesn't work in Facebook inspect elements. I want to select each post as a range which becomes very difficult. Doesn't work means the elements do not get selected in search bar whereas other selectors work fine I am using chromedriver.

[@mikoajp.5890]

For vast majority of viewers a color is easier to follow than pattern. However, thin lines are notorious for lower accessibility. Filled colors would be better than colored borders, for cases like this selector a golden solution would be maybe images of a puppy and a flower?

[@daleryanaldover6545]

​@@mikoajp.5890yes, pretty weird he requested for border when fill colors are mostly apt for his situation.

[@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. 😊

[@techwake360]

that was awesome, thanks kevin

[@QuantumCanvas07]

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

[@m12652]

Nicely done 👍

[@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

[@br3nto]

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

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

[@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" ?

[@KevinPowell]

This sounds like something that will be a lot easier to solve once we have @scope... probably a way to do it now using `:has()` as well, along with a nested :not(), but then you get into pretty convoluted selectors doing that...

[@pascalmaranus]

@@KevinPowell I’ll keep that stuff as it is right now. Still… it’s great to have these range selections possible now.

[@makiroll6815]

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

[@mathew-sunny]

Can we use custom properties inside nth selectors?

[@claudschgi4794]

Can you make a video about centering vertical elements in a Grid like in Flexbox (justify-content: center). I did this with nth-last-child of class but probably you have another great solutions?

[@erickdavid4257]

this made me feel smart

[@rand0mtv660]

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.

[@KonRud5]

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

[@shakoimnadze2211]

Correct -1 is reduntant since n starts at 0 and increments by 1 per selection

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

[@nove1398]

We need the parent and parent sibling selector

[@Elias-zn6og]

nice

[@RobBulmahn]

I've always been bothered by the nth-of-type syntax. Like, I get the explanation here, but how it relates to indexing in programming languages, or how algebraic "mx + b" formulas are constructed, it doesn't match any of that logic.

[@HappyLooter]

Yeah why not just 1x2 for “start at 1 and take every second” or 4x3 for “start at 4 and take every third

[@RobBulmahn]

@@HappyLooter Personally, what makes most sense to me would be something like "n >= 2" or "n < 6". When I look at "n + 2" it just doesn't click with me that it means everything from 2 onwards.

[@KevinPowell]

Oh, something like > or >= would be awesome.

[@abhishekrawat8579]

❤

[@OCEMTechZone]

🎉

[@LokiDaFerret]

Something isn't right here. Pause the video at 4 minutes and 30 seconds where you have thrown in not a box. The last green element is actually the 7th box. Not the 8th. Why?

[@Dimitar-T-Radev]

3:45 Bulgarians will get it,

[@petarkolev6928]

WHITE GREEN RED - BULGARIA'S FLAG

[@jeksoncohen]

first

[@aram5642]

Offtopic: Would you manage to have Miriam on the show? She used to publish videos on Mozilla channel, but sadly it got sunset. Would be fantastic to hear what she is excited or disappointed about, hoping for in CSS, etc.

[@KevinPowell]

She's on my list of people I'd like to have on, but I haven't talked to her about it yet :) - Waiting to meet her in person this summer, instead of just randomly dropping a DM :D

[@aram5642]

@@KevinPowell fingers crossed!