How you can simplify your CSS with :is()

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 พ.ย. 2024

ความคิดเห็น • 598

  • @guillermoandradaFSD
    @guillermoandradaFSD 3 ปีที่แล้ว +386

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

    • @devchaudhary78
      @devchaudhary78 3 ปีที่แล้ว +3

      Same

    • @kingpeterpanes7196
      @kingpeterpanes7196 3 ปีที่แล้ว +2

      wait, so this feature is not new?

    • @Gauravguptakumar
      @Gauravguptakumar 3 ปีที่แล้ว

      Same here

    • @danielsharp2402
      @danielsharp2402 3 ปีที่แล้ว +6

      @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
      @xxgn 3 ปีที่แล้ว

      @@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
    @SebastianZartner 3 ปีที่แล้ว +184

    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
      @DFPercush 3 ปีที่แล้ว +3

      Thanks for the tip!

    • @xellr
      @xellr 3 ปีที่แล้ว +7

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

    • @RD-jr8nv
      @RD-jr8nv 3 ปีที่แล้ว

      @@Jens-OS Tu est Francais?

    • @pradeepsaravanan7712
      @pradeepsaravanan7712 3 ปีที่แล้ว

      @@Jens-OS sure

    • @RC-zf7hp
      @RC-zf7hp 3 ปีที่แล้ว

      😊 thanks!

  • @uros.u.novakovic
    @uros.u.novakovic 3 ปีที่แล้ว +67

    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!

  • @kunleadelowo1106
    @kunleadelowo1106 3 ปีที่แล้ว +28

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

  • @codeSTACKr
    @codeSTACKr 3 ปีที่แล้ว +126

    Awesome!

    • @JesusFriend
      @JesusFriend 3 ปีที่แล้ว

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

  • @Morrile1
    @Morrile1 3 ปีที่แล้ว +73

    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
      @PaulValickas ปีที่แล้ว

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

  • @protocode_227
    @protocode_227 3 ปีที่แล้ว +8

    I love watching Kevin talking about the specificity of things 😌

  • @AhmadAlMutawa_abunoor
    @AhmadAlMutawa_abunoor 3 ปีที่แล้ว

    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.

  • @ajibolanle
    @ajibolanle 3 ปีที่แล้ว

    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!!

  • @XanarkanD
    @XanarkanD 3 ปีที่แล้ว +3

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

  • @shngsam8777
    @shngsam8777 3 ปีที่แล้ว +1

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

  • @CodingNuggets
    @CodingNuggets 3 ปีที่แล้ว +13

    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!

  • @codingdevofficial
    @codingdevofficial 3 ปีที่แล้ว

    I always wonder, how could someone dislike his videos? He is so kind and generous, when it comes to sharing his design knowledge. Watching his videos makes me better designer.

    • @willemm9356
      @willemm9356 3 ปีที่แล้ว

      Probably IE users. ;)

  • @Ztekk1
    @Ztekk1 3 ปีที่แล้ว +1

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

  • @colinwiseman
    @colinwiseman 2 ปีที่แล้ว

    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.

  • @Working800
    @Working800 3 ปีที่แล้ว +1

    I know why they call you the king of CSS, your content and way to explain are incredible

  • @saschab.5154
    @saschab.5154 2 ปีที่แล้ว

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

  • @ShawnRitch
    @ShawnRitch 3 ปีที่แล้ว +14

    That :is good to know - thanks :)

  • @luiscolome75
    @luiscolome75 3 ปีที่แล้ว

    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.

  • @FririkurEllefsen
    @FririkurEllefsen 3 ปีที่แล้ว

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

  • @AWM_2023
    @AWM_2023 3 ปีที่แล้ว +5

    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.

  • @franciscomagalhaes7457
    @franciscomagalhaes7457 3 ปีที่แล้ว

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

  • @vitorgobatogercov8879
    @vitorgobatogercov8879 3 ปีที่แล้ว +4

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

    • @calvijn7717
      @calvijn7717 3 ปีที่แล้ว +1

      his glasses to

  • @jbyork
    @jbyork 3 ปีที่แล้ว +2

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

  • @PaulBilton
    @PaulBilton 3 ปีที่แล้ว +1

    absolutely fantastic tip! thank you for posting this up

  • @zentali-meditation
    @zentali-meditation 3 ปีที่แล้ว +5

    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

  • @danielschutzsmith9399
    @danielschutzsmith9399 3 ปีที่แล้ว

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

  • @MikeDest
    @MikeDest 3 ปีที่แล้ว

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

  • @RajPhotoEditingMuchMore
    @RajPhotoEditingMuchMore 3 ปีที่แล้ว +19

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

  • @rimzzlabs
    @rimzzlabs 3 ปีที่แล้ว +1

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

  • @example101
    @example101 3 ปีที่แล้ว

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

  • @kiggi__
    @kiggi__ 3 ปีที่แล้ว +1

    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.

  • @victorwestmann
    @victorwestmann 3 ปีที่แล้ว +1

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

  • @ck0024
    @ck0024 3 ปีที่แล้ว +10

    This :is(cool, awesome, fantastic)

  • @samuelwuw
    @samuelwuw 3 ปีที่แล้ว +1

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

  • @mrshawnspencer
    @mrshawnspencer 3 ปีที่แล้ว

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

  • @SuperDHARU
    @SuperDHARU 3 ปีที่แล้ว

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

  • @shekar_webdev
    @shekar_webdev 2 ปีที่แล้ว

    Your research and teachings are so amazing sir

  • @Karlodun
    @Karlodun 3 ปีที่แล้ว

    Normally I prefer russian speaking channels for such topics.... first time I encountered an english video on IT topic which is so good and easy to understand! Bravo! I will certainly watch more!!!

  • @RD-jr8nv
    @RD-jr8nv 3 ปีที่แล้ว

    This seems excellent. Going to start using ASAP.

  • @simplymusical4583
    @simplymusical4583 3 ปีที่แล้ว

    As always, thank you so much for sharing!

  • @miguelagawin
    @miguelagawin 3 ปีที่แล้ว

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

  • @keeganhinnigan
    @keeganhinnigan 3 ปีที่แล้ว

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

  • @RC-zf7hp
    @RC-zf7hp 3 ปีที่แล้ว

    Thank you 💗 you deserve millions of subscribers.

  • @facundocorradini
    @facundocorradini 3 ปีที่แล้ว +27

    Very interesting point on specificisicisity :p no, seriously, that behaviour is guaranteed to cause _unexpected_ results when more people start using the :is pseudo, so it's good to know exactly how that works.

    • @KevinPowell
      @KevinPowell  3 ปีที่แล้ว +10

      Yeah, I was little surprised how it calculated it. I think :where() will be more widely used than :is() because of it's lack of specificity. And I was going to write once browsers start supporting it, but it looks like they're starting to!

    • @niner8275
      @niner8275 3 ปีที่แล้ว +5

      @@KevinPowell Wait... there is a :where(), too?!

  • @joserabn7156
    @joserabn7156 3 ปีที่แล้ว

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

  • @ycombinator765
    @ycombinator765 2 ปีที่แล้ว

    I recommend CSS in Depth book to everyone. It is a life saver of a reference.

  • @JmenDem
    @JmenDem 3 ปีที่แล้ว

    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

  • @jvenkatonline
    @jvenkatonline 3 ปีที่แล้ว

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

  • @OneTamadTV
    @OneTamadTV 3 ปีที่แล้ว +4

    Idk why but most of the Frontend devs really struggle with that turquoise... What is mind-boggling is that, with the wide range of colors to choose from, we often choose turquoise and misspelled it several times before deciding to give up and choose another color.

  • @Seranuelian
    @Seranuelian 3 ปีที่แล้ว

    You‘re really good at teaching/showcasing.

  • @louisgamor
    @louisgamor 3 ปีที่แล้ว

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

  • @cachemoola2042
    @cachemoola2042 3 ปีที่แล้ว +1

    Kevin got a smooth ass voice. I love hearing him on scrimba.

  • @futur3sn0w
    @futur3sn0w 3 ปีที่แล้ว

    My personal website only has one complex selector like this, but it is much cleaner for sure. Makes things much simpler!

  • @adamswalks2385
    @adamswalks2385 3 ปีที่แล้ว

    Super cool, thank you for creating and sharing!

    • @KevinPowell
      @KevinPowell  3 ปีที่แล้ว

      Glad you enjoyed it and welcome aboard!

  • @agnemedia624
    @agnemedia624 3 ปีที่แล้ว

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

  • @johnkeck
    @johnkeck 3 ปีที่แล้ว

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

  • @maskman4821
    @maskman4821 3 ปีที่แล้ว

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

  • @boxs
    @boxs 2 ปีที่แล้ว

    :is() in CSS like the common denominator in mathematics

  • @mikielgrato5705
    @mikielgrato5705 3 ปีที่แล้ว

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

  • @emkisn
    @emkisn 3 ปีที่แล้ว

    Really amazing selector, thanks a lot for sharing

  • @patriayvida4209
    @patriayvida4209 3 ปีที่แล้ว

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

  • @chhavimanichoubey9437
    @chhavimanichoubey9437 3 ปีที่แล้ว

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

  • @JulianSloman
    @JulianSloman 3 ปีที่แล้ว

    that's a good chunk of what I used SCSS for... - though there's obviously lots of other things that were nice about it - still now that CSS-in-JS is common this is actually useful again!

  • @sskdev5116
    @sskdev5116 3 ปีที่แล้ว +1

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

  • @colleenwieder
    @colleenwieder หลายเดือนก่อน

    Thank you, Kevin, explained well.

  • @arsh999cg
    @arsh999cg 3 ปีที่แล้ว

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

  • @mariajackson8923
    @mariajackson8923 3 ปีที่แล้ว +1

    Great explanation. I always learn so much from you.

  • @ryansandigan7184
    @ryansandigan7184 3 ปีที่แล้ว

    Thanks, Kevin. My CSS skills dramatically leveled up...

  • @dontargetme2416
    @dontargetme2416 3 ปีที่แล้ว

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

  • @moretimeproductions
    @moretimeproductions 3 ปีที่แล้ว +7

    KevinPowell :is(lit, legit, onFire) {
    flex: skills;
    }

  • @JaredNichols909
    @JaredNichols909 3 ปีที่แล้ว

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

    • @KevinPowell
      @KevinPowell  3 ปีที่แล้ว

      So happy to hear that!

  • @joecolas
    @joecolas 2 ปีที่แล้ว

    thank you @Kevin @Powell

  • @Aleph-Zero
    @Aleph-Zero 3 ปีที่แล้ว

    I watch these videos while I eat because I enjoy them.

  • @yupii1997
    @yupii1997 3 ปีที่แล้ว

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

  • @MartinBelcher
    @MartinBelcher 3 ปีที่แล้ว

    I recently discovered :has() and loved it

  • @boxfreshpidge
    @boxfreshpidge 3 ปีที่แล้ว

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

  • @vipvids1o5
    @vipvids1o5 3 ปีที่แล้ว

    Great stuff!!! really liked the specificity part

    • @KevinPowell
      @KevinPowell  3 ปีที่แล้ว +1

      Glad you enjoyed it

  • @RebrandSoon0000
    @RebrandSoon0000 3 ปีที่แล้ว

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

  • @ztamizzen
    @ztamizzen 3 ปีที่แล้ว

    You should have included :where when you spoke of specificity.
    I totally missed that :matches had a name-change, so thank U for the vid. 😊

  • @arpansrivastava9260
    @arpansrivastava9260 3 ปีที่แล้ว

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

  • @IshanKesharwani
    @IshanKesharwani 3 ปีที่แล้ว +1

    Now that's called KEVIN BOMB 💣

  • @Rocadamis
    @Rocadamis 3 ปีที่แล้ว

    Love this! Definitely didn't know this even existed. You might choose to say it's "higher in the CSS hierarchy" rather than “specificity”. It's a tongue-twister for anyone. Ha ha ha!

  • @domanickharper
    @domanickharper 3 ปีที่แล้ว

    I think p:hover would work in a scenario where maybe you have a site where you read stories with a class and maybe you highlight it on screen to help kids or anyone follow along or pick up if they weren’t paying attention. Or in general if it’s a site full of books then maybe it’d even help people not lose their place if you hover over the paragraph that you’re reading yourself

  • @TusharShukladevx
    @TusharShukladevx 3 ปีที่แล้ว

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

    • @TusharShukladevx
      @TusharShukladevx 3 ปีที่แล้ว

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

  • @armaweb6809
    @armaweb6809 3 ปีที่แล้ว

    Thx Kevin! Another useful things from you !!!

  • @christophermatt5925
    @christophermatt5925 2 ปีที่แล้ว

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

  • @hoangcoitk5
    @hoangcoitk5 3 ปีที่แล้ว

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

  • @paulm.7967
    @paulm.7967 3 ปีที่แล้ว

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

  • @martinlinden937
    @martinlinden937 3 ปีที่แล้ว

    Had no idea you could do that. Good stuff!

  • @jochenpanjaer980
    @jochenpanjaer980 3 ปีที่แล้ว +4

    Great lesson!
    But for me, it adds complexity. Sometimes verbose is more simple.
    I like my stuff readable.
    Also, when using a css precompiler, like sass, the :is pseudoclass becomes a bit obsolete.

  • @VanfireOfficial
    @VanfireOfficial 3 ปีที่แล้ว

    this is better than SASS.

    • @qedro
      @qedro 10 หลายเดือนก่อน

      What do you mean?

  • @waleedanjum
    @waleedanjum 3 ปีที่แล้ว

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

  • @Bernardopoyer
    @Bernardopoyer 3 ปีที่แล้ว +71

    I wrote
    :is( .best-css-channel ) {
    color: blue;
    }
    now all your videos have blue titles!!!

    • @SahilVerma-wm6ie
      @SahilVerma-wm6ie 3 ปีที่แล้ว +25

      should be #best-css-channel because there can be only one "best css channel" ;)

    • @rasalas91
      @rasalas91 3 ปีที่แล้ว +1

      y'all are cute af

  • @amosadewuni460
    @amosadewuni460 2 ปีที่แล้ว

    Good explanation. Get it now. Thank you.

  • @CoffeeDuoes
    @CoffeeDuoes 3 ปีที่แล้ว

    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 !

  • @roji4632
    @roji4632 3 ปีที่แล้ว

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

  • @Aspiiire
    @Aspiiire 3 ปีที่แล้ว

    Thanks for sharing really loved this one!

  • @anfas184
    @anfas184 3 ปีที่แล้ว

    thanks I learnt a new pseudo class

  • @JayCeeGee
    @JayCeeGee 3 ปีที่แล้ว +1

    I still think :not() is the GOAT pseudo-class... It can keep you from writing so much extra CSS.

    • @boem231
      @boem231 3 ปีที่แล้ว +1

      What does it do?