A simple CSS solution to select ranges of content
Vložit
- čas přidán 1. 06. 2024
- Looking to step up your CSS Game? I have free and premium courses 👉kevinpowell.co/courses?...
🔗 Links
✅ Code from this video: codepen.io/kevinpowell/pen/jO...
✅ nth-child type of syntax support: caniuse.com/css-nth-child-of
⌚ 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
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
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.
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.
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
@@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.
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?
@@mikoajp.5890yes, pretty weird he requested for border when fill colors are mostly apt for his situation.
Just awesomely explained 🎉
Great discovery! Thanks a lot for the walkthrough
wow, you are a Css magician. Thanks for such rich knowledgeable content
Thanks for the video Sir, your videos are awaited everyday ❤
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. 😊
that was awesome, thanks kevin
Thanks for this useful selection tips🙂
Nicely done 👍
First time happened that I knew everything about things you talked in video😁
With this level of consistency it seems like this man can build a full blown GTA game just in CSS.
this made me feel smart
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)`
Can we use custom properties inside nth selectors?
Where can i find the video about the grid images @0:06?
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" ?
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...
@@KevinPowell I’ll keep that stuff as it is right now.
Still… it’s great to have these range selections possible now.
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
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
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?
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
nice
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.
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 🖖🏽
Thank you so much!
❤
We need the parent and parent sibling selector
WHITE GREEN RED - BULGARIA'S FLAG
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.
Yeah why not just 1x2 for “start at 1 and take every second” or 4x3 for “start at 4 and take every third
@@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.
Oh, something like > or >= would be awesome.
3:45 Bulgarians will get it,
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?
first
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.
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
@@KevinPowell fingers crossed!