How you can simplify your CSS with :is()

The :is() pseudo-class is relatively new, but browser support is pretty good now! It's a nice way to dry up your CSS and turn some otherwise complex selectors into something much more managable!
Codepen: codepen.io/kevinpowell/pen/Rw...
Step up your game with advanced CSS selectors and combinators: • Step up your CSS game ...
#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
---
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 KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
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!

[@guillermoandradaFSD]

I didn't know that even exist... Thank you Kevin

[@devchaudhary78]

Same

[@kingpeterpanes7196]

wait, so this feature is not new?

[@Gauravguptakumar]

Same here

[@danielsharp2402]

@Greyson Mario Advertise in a place where people are not already programmers and know this is a bunch of bullshit. Might save you some pennies on the bots.

[@xxgn]

@@kingpeterpanes7196 It's pretty new, though part of the confusion is that it's been renamed a couple times. It was previously called :matches and :any , but those names are now deprecated. I'd hesitate to use this in production until developer.mozilla.org/en-US/docs/Web/CSS/:is#browser_compatibility has more green in it.

[@SebastianZartner]

When talking about :is(), you should also talk about the very similar :where() pseudo-class, which has the only difference that it has 0 specificity. :is(), on the other side, takes on the specificity of the most specific selector in it.

[@DFPercush]

Thanks for the tip!

[@xellr]

But if that is the only specificity, then is it better to work with :where() rather than with :is() ?

[@RD-jr8nv]

@@Jens-OS Tu est Francais?

[@pradeepsaravanan7712]

@@Jens-OS sure

[@RC-zf7hp]

😊 thanks!

[@uros.u.novakovic]

This randomly appeared in my youtube recommendations, I didn't even know :is() exists. This'll come in handly I'm sure. Thanks for the video!

[@KevinPowell]

Glad you enjoyed it!

[@uros.u.novakovic]

@@Jens-OS No.

[@kunleadelowo1106]

My CSS has really improved from following and watching your content. Thanks a lot for your work

[@codeSTACKr]

Awesome!

[@JesusFriend]

@@Jens-OS You need content and have none get content then ask again

[@Morrile1]

Once again Kevin produces a gem of valuable useful and practical information. I love the way Kevin explains in ways we can understand and learn 👍 👍 👍

[@PaulValickas]

Nope. This was waist of time the only useful info is :is is useless.

[@example101]

Nice work fella! A quick look at several of your vids shows a great library of PRO tips.

[@saschab.5154]

Was looking for this solution for ages, thanks so much for sharing!

[@jbyork]

This is an awesome video! Thanks for explaining this so thoroughly but also being so concise!

[@protocode_227]

I love watching Kevin talking about the specificity of things 😌

[@victorwestmann]

Super handy and well explained video. Thanks for sharing your knowledge Kevin!

[@shngsam8777]

Thanks for the video! great note there on specificity , very useful

[@ajibolanle]

I only started watching KP's videos about two months ago and the massive value it has added to my CSS skills is just unbelievable! Great work, Kevin! You're awesome!!

[@FririkurEllefsen]

Very informative. Kudos for warning us about the specificity hurdle. Thank you

[@vitorgobatogercov8879]

Your classes are always amazing, thank you for these incredible videos, much love :)

[@calvijn7717]

his glasses to

[@keeganhinnigan]

really useful to knoq, will be using this in my next project. thanks kevin :)

[@maskman4821]

This is a very practical / useful / informative tutorial, thank you Kevin !!!

[@johnkeck]

Thanks, Kevin! That was tremendously useful, especially with the caveats!

[@luiscolome75]

I had no idea of :is!! Very nice tutorial Kevin. As always I've learn something with your videos. This is why you were in The State of CSS survey. I didn't get the specificity "issue". I guess I have to watch it again...Great job Kevin! Thanks million for your videos.

[@rimzzlabs]

thank you for the tips Sir Kevin, very helpful for me! i will wait for your next videos!

[@mariajackson8923]

Great explanation. I always learn so much from you.

[@danielschutzsmith9399]

didn’t even know this was a thing! Thanks so much for the quick and informative overview.

[@SuperDHARU]

That was absolutely new and useful method. You're do natural and explains very easily. Keep exploring such things! 🤘

[@KevinPowell]

Thank you! 😃

[@marksmith5434]

Just subscribed - to the point and incredibly insightful. Thankyou 😎

[@vipvids1o5]

Great stuff!!! really liked the specificity part

[@KevinPowell]

Glad you enjoyed it

[@simplymusical4583]

As always, thank you so much for sharing!

[@PaulBilton]

absolutely fantastic tip! thank you for posting this up

[@joserabn7156]

Thank you Kevin, I will start applying this at work today. Your the best!.

[@XanarkanD]

I appreciate your specificity explanation. As a new developer these little technicalities can be aggravating if you don't know about them!

[@patriayvida4209]

WoW ! Great information Kevin. Thanks a lot ! I've just learned something new bro!

[@waleedanjum]

Superb.. i really like this man. You increased my knowledge and its very helpful

[@mrshawnspencer]

THANK YOU for posting this. Awesome stuff. Stay safe & healthy.

[@emkisn]

Really amazing selector, thanks a lot for sharing

[@miguelagawin]

Great tip! Thank you! Definitely use the space child selector a lot.

[@TusharShukladevx]

That was a nice explanation + I didn't know about that group specificity thing so thanks for that 😊

[@TusharShukladevx]

@@Jens-OS Ohh I'd love to subscribe to your channel but sadly I hate spammers.

[@samuelwuw]

Nice content! Is simple to understand, and this pseudo class is a powerfull tool in development! Thx for this vídeo!

[@Ztekk1]

WOW! My mind is blown, I had no idea about this. Glad this popped up in my recommendations.

[@armaweb6809]

Thx Kevin! Another useful things from you !!!

[@JmenDem]

Really cool! It was the first video I've watched on this channel! You've got a new subscriber) I am in FE for 6 years, and last 4 years I'm using SCSS. IMHO SCSS is much easier, don't even know if I'll need this "is(...)" pseudo

[@RajPhotoEditingMuchMore]

😲 wow! Thanks ☺ a lot sir 🙏Very unique and interesting information 👍

[@JaredNichols909]

Very cool. You do a great job explaining and introducing these subjects.

[@KevinPowell]

So happy to hear that!

[@CoreDreamStudios]

Nice trick, never knew about this until now, thank you!

[@jvenkatonline]

Kevin, you are awesome. these are really time-saving tips. ':is()' is cool.

[@dontargetme2416]

today i learned something new , thanks kevin you're awesome !

[@adamswalks2385]

Super cool, thank you for creating and sharing!

[@KevinPowell]

Glad you enjoyed it and welcome aboard!

[@roji4632]

Thanks Kevin, I didn't know about this until nooow! This will be so helpful! Like and Subscribed!

[@Seranuelian]

You‘re really good at teaching/showcasing.

[@christophermatt5925]

Your Tutorials are awesome! Thank you so much :-)

[@RD-jr8nv]

This seems excellent. Going to start using ASAP.

[@kiggi__]

Fantastic video, i am currently doing a course in software development and have covered HTML5 and CSS3 but not even this was mentioned in the course i had done.

[@RC-zf7hp]

Thank you 💗 you deserve millions of subscribers.

[@mikielgrato5705]

I'm new to css so this was Really helpful thanks a ton!

[@louisgamor]

This is simply awesooooooommmmeeee. Love you Kevin. Big ups!

[@hectorvasquez2874]

Super useful stuff... as always. Thanks!

[@CHANDRASHEKAR-ox4qt]

Your research and teachings are so amazing sir

[@franciscomagalhaes7457]

Good god, how have I never seen this before? That is so much better than how I have been doing things! Thanks a bunch!

[@arpansrivastava9260]

whooo ! didn't know about that thanks for sharing it Kevin surely gonna use it for sure 👍

[@ytkeebOo]

....always learning something new. as always, awesome video and thanks.

[@ytkeebOo]

so happy to start using just now ;) [...] & :is(td,th):nth-child(1) { padding-left:1rem; text-align:left; width:70px; font-family:monospace; font-size:10px; } [...]

[@jason0ng]

Super handy! Thank you 🙏

[@CodingNuggets]

Never even heard of this pseudo class, but I'm not a CSS Ninja like you Kevin. Thanks for filling me in. See you soon!

[@MikeDest]

Neat, been doing CSS since 1999 and didn’t know this existed. I need to figure out what else I don’t know. Subscribed

[@ikazak]

Valuable information, thanks!

[@AhmadAlMutawa_abunoor]

I don't know if people tell you this or not. But I find you as a very likable and kind hearted man, the type people like to have around, despite not knowing you are just seeing you for the first time. I say this, because I for one can tell if someone is unpleasant, or evil looking by looking at his face. Your face, the way you talk, and how you present your content, says a lot about you. Oh, nice video by the way. Keep up the good work.

[@martinlinden937]

Had no idea you could do that. Good stuff!

[@CoffeeDuoes]

WOW , thank you so much ! I live a sub. Ive been working with CSS files for a while and my setups can get messy, thanks so much for showing this method !

[@Aspiiire]

Thanks for sharing really loved this one!

[@yupii1997]

Wow this is really useful clean and easy to read, had no idea this existed

[@boxfreshpidge]

Amazing! Only started using :not() so this is a nice addition

[@paulm.7967]

Oh man, I remember seeing this and wanting to use it but the browser support wasn't there yet. Great video; solid tut.

[@KevinPowell]

Thanks!

[@colinwiseman]

Was really confused by this :is() thinking that it didn't syntactically make sense header :is(). But really this is just a shorthand way of "header *:is()" and now I love it 😀 thanks for sharing. I will absolutely be using it.

[@markdioneeb8997]

THAT IS VERY USEFUL!!!! thank you very much

[@berkaybakacak]

KZbin finally recommended such a helpful thing, thanks 😁

[@arsh999cg]

I love your tutorials mostly because of your joker cards you through like this and win the game. :)

[@hoangcoitk5]

wow. that is awesome usage of :is() thank you for sharing

[@the-real-tridder]

Thanks Kevin, awesome info as always! #stillrelevant!

[@LeandroSimoesArt]

OMG! I really didn't know that! Thanks!

[@ShawnRitch]

That :is good to know - thanks :)

[@amosadewuni460]

Good explanation. Get it now. Thank you.

[@abdillahsyafiq]

This is great! Thanks for sharing!

[@KevinPowell]

Glad you enjoyed it!

[@jintal]

Good to know! Chaining multiple selectors (with a comma, or lots of nesting in Sass) can get slow, would be great to know how :is compares in speed

[@nirzar52]

It made life easier! Thanks!

[@DroidZed]

Thanks for the tip ! I didn't know about it but now I can make use of it in my website hehe :D

[@xthukuh]

This info is useful. Thank you.

[@LuisReyes-zs4uk]

Your videos are awesome. Thank you.

[@agnemedia624]

I didn't know that even exist, Great. Thank you Kevin

[@zen-zeo3223]

thx, love your videos. very appreciated ^^

[@MrFoghorn111]

Very cool demonstration.

[@chhavimanichoubey9437]

I've read about it recently but now i fully understand it thanks

[@apex-lazer]

You’re so awesome thank you brother ❤

[@AWM_2023]

Thanks for making me feel like I know NOTHING about CSS, Kevin. Oh yeah, thanks SO MUCH, Kevin. How can I tell my friends now that I work and actually GET PAID for writing CSS code? 🤣 Great as always, Mr. Powell. Thank you very much.

[@lomeshdaheria9960]

Thanks for such an awesome content sir🙏😁😊🙂

[@mrrolandlawrence]

wow once again.. awesome useful... things i never knew

[@penguinxed]

very useful, thanks sir! :)

[@lalitsoni004]

Awesome, thanks for sharing it.

[@guilhermemoraes4055]

That's really really cool !

[@sskdev5116]

Oh my God!!! You just made my life easy. This has reduced my CSS lines

[@niteshkrsah2222]

As always awesome video

[@techtips4019]

Great info and great video quality

[@earthquake876]

Valueable as always. Thanks

[@MrLucasEss]

Nice video once again! I'm just missing the codepen link in the description

[@KevinPowell]

I always forget the codepen link 😞 codepen.io/kevinpowell/pen/RwojMKB