nth-child() just got an upgrade

[@BaileyPoint]

This is awesome! I just commented on one of your other videos saying we needed something like this (though I would have expected an "nth-of-selector" syntax)!

[@philippciftci6649]

I want to make a Knowlegde Meeting in my office soon about some cool CSS and HTML features.I follow your channel already a long time and I'm a huge fan. Now I'm going again through most of your videos to make a list of the coolest ones and going to shine like a star. 😂

[@MRVDOG]

I actually needed to do this today, and realised I couldn't, but this is exciting!!! can't wait for full support

[@futurefox128]

Make sure to check out Zoe Pentaleri's post (somewhere at the top as of now) for a 100% supported solution for 1st child selection. (yea I could have just copypasted it here, but I didn't want to make it seem like I'm stealing their answer... which is exactly what that would have ment ^^)

[@solvedfyi]

Video title good, length good, point good, you got it

[@rafasharla]

Hey Kevin! It's just really inspiring to see how excited you get with the new things that are coming up. Makes me want to dive really deep on CSS. Thank you for sharing your excitement :)

[@KevinPowell]

Glad my enthusiam manages to make it's way through!

[@Issvor]

I love that final comment you said. "Even if somebody is on an older device that can't update the browser, it's not the end of the world. they still have a working experience, even if it's not a perfect one".

[@KeithGrant]

I don't know how I missed this in the Chrome release notes, but thanks for pointing it out!

[@AlvinIsChipmunk]

Awesome video as always Kevin. Just a question though, how do you keep yourself updated with all these upgrades? Is there a newsletter for that?

[@KevinPowell]

I keep up with the new features coming to the beta of browsers, since that means it'll be going to production soon enough, and all the browsers post blog updates with all the new features that are included. I also follow a bunch of dev rel people on Twitter who work at the browsers who always are sharing stuff about what's on the way. csslayout.news/ by Rachel Andrew is great as well.

[@TheRalic]

How did I skip this video? 😮 Thank you for explaining this!

[@eioluseyi]

Hi Kevin, how do you stay on top of the css updates?

[@rato_gordo]

Curious too.

[@sallybugs1695]

Google

[@turolretar]

MDN probably, maybe browser engines blogs

[@eioluseyi]

@@turolretar yeah, I use those too. I'm just really curious about how Kevin handles it for himself also. I'm secretly hoping for a video on this 🥺

[@AndersFloor]

He follows Kevin Powell on KZbin ;)

[@adamuk73]

This question gets asked so often on stack overflow. I'm glad it's getting fixed now

[@goodshiro10]

Wait, things all I needed in the past are new videos of yours 😶😶Also thanks for sharing it 🙂

[@DurgeshMaheshwaritela]

It's going to help a lot, Thanks

[@christophermatt5925]

Thank you Master Powell 😁

[@Lucsy3012]

Great to see this working now! I was always frustrated with nth-of-type and how it worked

[@Pesthuf]

Holy crap. I've been wanting this for so long.

[@zoepentaleri]

Just an FYI to people who might want to replicate the effect in the video, you can achieve it without the new syntax too. article > .clr-accent { /* highlighted style */ } article > .clr-accent ~ .clr-accent { /* normal style */ } This first selects all elements of .clr-accent, then only selects the elements of .clr-accent that follow another .clr-accent - i.e. all but the first one.

[@futurefox128]

This comment should get pinned. Same effect for 1st element and full browser support. I think the same effect can be achieved by using :not() and this has the benefit of not having to reapply the wanted properties of "normal style" to "highlighted style": .class { /*normal style*/ } parent > .class:not(.class ~ .class) { /* adjustments */ } ...but linters seem to hate this syntax for some reason, so your solution is probably more correct :) Anyway, I remember using this trick (or a similar version with + instead of ~) to apply a border-top to all vertical s except for the first one, which is another neat application of this subsequent-sibling selector.

[@gr81matt]

Very cool, I was just trying to do something like this the other day... I wonder if they will bring similar functionality to :last-child()/:first-child()? You could use that :nth-child(1 of .clr-accent) to find the first pretty easily, but last might be hard to target if you didn't know the content length. Something like :last-child(.clr-accent)

[@gr81matt]

Oh, nevermind... it's there in the link. :nth-last-child()

[@stephenprice7502]

I love this channel, but I really struggle to remember all the cool things that Kevin teaches us. If he put a cheatsheet in the description of each video it would be awesome.

[@KevinPowell]

Too many things for one cheat sheet 😅 I do have a few, but not very many. Maybe something I could work on though!

[@amaury_permer]

I always come back when I need to do something haha

[@kikefuentes5191]

make your own notes on a file made only for cool/obscure css tools you have to remember, so you always can come back to it on doubt

[@MrMairu555]

@@amaury_permer Me too. I also [personally] find Kevin has covered everything I have needed to do (my sites are relatively simple), so only watch his CSS videos. That makes it easy to seach just his channel for a previous video I watched to revise. If I were to watch multiple CSS channels I'd probably forget who taught me something, and would never find it again! 🤣🤣🤣 I do the same with anything I want to "learn".... find the best channel [for me], and then just stick with it. Piximperfect for Adobe Photoshop, for example.

[@not_amanullah]

This tutorial is helpful ❤

[@Kimi-xp2th]

Thanks for the video.

[@pascalmaranus]

Definitely a great and probably long overdue feature. They could have (and in my opinion should have) simply gone for "nth-of-class", though. And in all fairness, I have ignored Internet Explorer for years. There's only so much we can do. So as a business, unless specifically requested otherwise (i.e. our government is really far behind technologically), I look at browsers that are 2-3 years old at most.

[@KevinPowell]

This solves the nth-of-class, and opens up a lot more as well, as it can be pretty much any selector, including more complex ones :)

[@pascalmaranus]

@@KevinPowell I get that it covers it mostly. But nth-of-class would be a lot easier to use syntax-wise. I’m already already struggling each time I have to use (3n + 1), because I’m so used to working with JS and PHP - where they start at 0 - that I’m always unsure which one it would select 🙈

[@yestermonth]

@@pascalmaranus And how do you select ID or attribute?

[@pascalmaranus]

@@yestermonth I would assume the same way as always. Just like within :not(), :has(), etc. Although ID selectors should always be unique, so they seem unnecessary here.

[@therealsuper5828]

HELL YEAH

[@erfanvatanparasti2949]

It is awesome... i didn't know it before👋👍

[@AmodeusR]

Thank god it's simple to understand

[@amrsayed74]

Awesome ♥

[@hineko_]

in the end they just gonna add js to css

[@Milky____]

True lol

[@ajmalDeveloper]

Amazing boss

[@VasilyPavlik]

WOW!!!! This is the one of the most desired CSS update!!!

[@LeeSmith-cf1vo]

Thats a nice feature, I like it. I hate the syntax But I like what it can do

[@davien001]

I just love css.

[@Milky____]

I hated css till I found his channel

[@cuongnguyenduy7933]

Thanks❤

[@programingwithali2461]

Wow

[@not_amanullah]

Thanks

[@KacperKwinta]

really cool

[@adsheff]

Does anyone make printable cheat sheets for these new features? Sometimes it would be easier to have it on a piece of paper as you code, rather than a website.

[@penguinxed]

very cool

[@oliver139]

OMG, I've misunderstood the usage of :nth-of-type until now..

[@NOT6248]

Should I use it now?

[@tonyrogers7101]

🥳

[@Skw384]

Hi Kevin, do you know why react doesn’t like nth-child and prefer nth-type-of?

[@CodecrafterArtemis]

*Ode to joy starts playing* Seriously, I feel like CSS is getting A LOT of cool new features every year.

[@TesterAnimal1]

Actually I want last of type. Can we do that?

[@jonsommet]

Just rewrote my code, thanks!

[@silasgeerts1736]

Hello, i like you color theme but i cant find it in vs code so what theme are you jusing(sorry for my gramer id dont speek englisch very well)

[@KevinPowell]

Atom One Dark :)

[@silasgeerts1736]

Nice, thank you

[@Akash-xv5sk]

import '@/styles/globals.css' why do we use @ in the beginning? is it just a convention or does it have meaning?

[@micheledellaquila7671]

Where Can I find out if this feature is full support or not??

[@JasonJA88]

👍

[@thegate8985]

Sorry for being so stupid, but why don't just use another class? I mean, probably your HTML is generated by template engines like Laravel Blade or is contained inside framework components, so you don't have to use those verbose expressions in CSS, you just add a class name once inside needed elements and define styles for it :)

[@KevinPowell]

It depends on the situation, but I think this is one of those things that you won't use too often, but you're *really* happy exists when you do need it.

[@sashinger5230]

:nth-of-class would have been a more intuitive way to implement it imho.

[@godnyx117]

Amazing! Can't wait 6 years till Internet Explorer supports this feature so I will be able to use it in production!

[@KevinPowell]

IE will never support it, they killed updates to it years ago, and it's officially dead now in that you can't even open it on any machine running Windows 10 or newer, it just opens Edge instead :)

[@godnyx117]

@@KevinPowell Wow, Kevin I don't believe that you actually took the time to reply to my comment. I was actually actually joking as you explicitly said in your video that browsers move so fast these days so I thought about trolling a bit saying that, lol! In any case, you are awesome!

[@leonkolodner7671]

Does it work only for children? Will it work for decedents from different parents?

[@portusdelphini]

Who works in Safari?

[@BoraKucukkara]

background music sia unstoppable

[@Atractiondj]

Finale, matafuka.....

[@DaviAreias]

maybe they should have named it nth-of-class?

[@KevinPowell]

This is basically that, but better, since you can do that, or have more complex selectors as well :D

[@aleattorium]

Wait, Safari already has it?

[@MrW0rDs]

Yeah... That's a first! What's odd is that caniuse shows that it's working starting at iOS 9, I don't know how that's possible.

[@saschab.5154]

Two browsers? Which ones? And, can we all just ignore IE and Safari from now on?

[@KevinPowell]

You can ignore IE unless you have pretty specific demographics on your site. You can ignore Safari if you don't mind if Kring everyone on an iPhone, since all broswer on iPhone run WebKit under the hood. It's actually ahead on a lot of new features now though, and FF is the one that's falling behind 😔

[@knghtbrd]

"Already on 80% of browsers" = Chrome. Just Chrome. Rainbow chrome, red chrome, orange chrome, blue chrome, other blue wannabe chrome, it's all chrome now, except for the one browser that isn't, which supports … none of this. Welcome to a world where an ad and spyware company controls whether you can use adblock and privacy extensions. The new CSS is cool I guess/

[@rickardelimaa]

Oh, man. Been soo annoyed of how _.class:nth-child_ is interpreted. Finally a solution for that, other than using javascript frameworks (which I use anyways when building a page).

[@D7460N]

VSCode yells at me all the time for valid CSS...

[@pickmeup20.02]

2 mins in :0

[@JimKernix]

Why does anyone concern themselves with Interne Explorer? Who are these people with IE and can not update? Are they in a 3rd world country or something? Do they live in a jungle? How is that even possible? Isn't there anyone to tell them to use a different browser? How do their old devices keep working?

[@Pesthuf]

Some companies have sysadmins who learned how to lock down IE and only IE 20 years ago and they refuse to let people use other browsers because they don't want to learn something new.

[@JimKernix]

@@Pesthuf How much longer until they retire or die? Do you think by 2050 we can stop worrying about IE support or do we have to wait for 2100?

[@KevinPowell]

Unless you're in a very niche industry (generally medical), you really don't have to worry about it anymore. You can't even open it on Windows 10 machines now, it'll just open Edge if you try.

[@NathanHedglin]

Because money 💰. Many companies have clients that are while companies still on IE 10 and 11

[@emi1866]

8 seconds in

[@qwertt14]

cool