Learn CSS Specificity In 11 Minutes

แชร์
ฝัง
  • เผยแพร่เมื่อ 11 ม.ค. 2025

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

  • @franksolinsky2365
    @franksolinsky2365 2 ปีที่แล้ว +42

    Hi Kyle,
    I don't write a lot of TH-cam comments, and I'm sure you'll never see this one. When I find myself consistently returning and learning from one particular TH-camr, I always want to make a point of thanking them personally for their content and hard work. So, thank you! You are very easy to listen to, follow along with and learn from. Cheers

  • @beto.aveiga
    @beto.aveiga 3 ปีที่แล้ว +13

    Wow... I've been 15 years doing web development and thought I had these basics down. But I just learned that classes are more specific than tags. Also, the operators "plus" and "greater than", although they imply a more specific context, are not considered in specificity calculation. Many thanks!

  • @youpeekayey
    @youpeekayey 4 ปีที่แล้ว +20

    Found you like a week ago and I'm impressed by the explenation clarity. Great content, sharing is caring!

  • @Wheatleybitch
    @Wheatleybitch 2 ปีที่แล้ว +5

    You are so good at explaining things. The voice, the visuals, the pace at which you present material - I was watching another person's video on this exact topic and still did not understand the concept after the video ended. Thank you for being an awesome educator, keep it up man!

  • @0-Elias-0
    @0-Elias-0 7 หลายเดือนก่อน +1

    This video is *important* ...
    ...especially for those who've learned to loathe !important
    (9:20) is particularly *important*

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

    smart tip you can query things with custom attributes
    in css
    div[box]{
    width:16px;
    height:16px;
    background: #000;
    }
    or in querySelector("div[box]")
    this thing make the coding faster and easier

  • @ProgrammingwithPeter
    @ProgrammingwithPeter 5 ปีที่แล้ว +25

    You're the best, you have tutor skills, great explaining!

  • @TrevorAllen-n8u
    @TrevorAllen-n8u 2 หลายเดือนก่อน

    Spent a few hours trying to figure out why my css wasn't working. Came here and boom solved. Thanks again Kyle!

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

    And here I was using important on my styles without knowing what was going on. Seriously your tutorials are the best.

  • @BLUBLU-r1c
    @BLUBLU-r1c 5 หลายเดือนก่อน

    Kyle, you saved me so often. I really like how you teach. It is short but on the point. So grateful about this content and just want to let you know. All the best for you!

  • @darthsidious3724
    @darthsidious3724 5 ปีที่แล้ว +71

    I really appreciate your content and just begging you for continue. Also, I was wandering if you would cover these specific topics:
    1) CSS box-sizing;
    2) creating fully functional custom videoplayer using HTML, CSS, JavaScript;
    3) working with HTML5 canvas (maybe make a paint-like app);
    4) working with context in JavaScript (call, apply, bind), where and when can we use that.
    It's just my suggestion, thank you a lot for what you're doing anyway.

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

    It was so easy to understand. Rather than explaining through all the rules, using those 4 digits was so efficient.

  • @abu-bakrmohamed1707
    @abu-bakrmohamed1707 ปีที่แล้ว

    Man!, u gotta be the best instructor for web dev on youtube !

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

    This guy is a genius in explaining complex things

  • @yvng4697
    @yvng4697 ปีที่แล้ว

    I couldnt understand anything in the Odin Project but you made it so much easier, thanks!

  • @drviagrin3798
    @drviagrin3798 ปีที่แล้ว

    I needed this so bad. It clears up so much as to why my CSS has not been working on some elements. Again, Thank you!

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

    He is the best web development teacher ever. He has taught all things so good that we remember the concept forever

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

    Best Web dev content provider..Great work keep up

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

    w3 schools was confusing to me for some reason and this vid made me understand it much easier

  • @iHidden1
    @iHidden1 5 ปีที่แล้ว +2

    This was amazing! Clearly explained, good examples, i simply loved it. Thank you for all these tutorials. Really hope you'll make more videos with concise informations that are used in day-to-day programming. Thanks once again!

    • @WebDevSimplified
      @WebDevSimplified  5 ปีที่แล้ว +2

      I'm really glad you enjoyed it. Do you have any suggestions for future videos in this vein you would like?

    • @iHidden1
      @iHidden1 5 ปีที่แล้ว

      @@WebDevSimplified I will surely think about some topics! Thanks for the reply!

    • @mohammedfarhaan9410
      @mohammedfarhaan9410 2 ปีที่แล้ว +1

      @@iHidden1 bruh ive been waiting two yrs

  • @marcwinner567
    @marcwinner567 5 ปีที่แล้ว +1

    This is quality content delivered in an easy to digest way. Many thanks!

  • @saisanthosh8694
    @saisanthosh8694 4 ปีที่แล้ว

    This is the best explanation ever! Clean and concise.

  • @0the0ambient0
    @0the0ambient0 4 ปีที่แล้ว +1

    Best explanation of specificity I’ve seen. Thanks!

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

    Thank you for the tutorial, your voice is very relaxing.

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

    Thanks Man !

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

    Thanks for making the topic fun instead of confusing! This reminded me of Linux chmod commands and instantly grokked into my brain. Well done.

  • @robertholtz
    @robertholtz 4 ปีที่แล้ว +1

    Outstanding explanation. Crystal clear demonstration. Really well done! 👍

  • @magdalenostrowska
    @magdalenostrowska ปีที่แล้ว

    You really have a gift to teach! Thanks for your amazing content!

  • @bama2619
    @bama2619 ปีที่แล้ว

    Big thanks from Wolfsburg 42 peer... your videos help me to learn front-end.

  • @amit674698
    @amit674698 ปีที่แล้ว

    you nailed it man just 2 minutes in the video I get the point

  • @aashayamballi
    @aashayamballi 5 ปีที่แล้ว +4

    Thank you Kyle for making me understand this concept :)

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

    Never knew about the numbers. Thanks so much!

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

    Fantastic video, I learned so much!
    Would you mind enabling captions please?

  • @yurii8710
    @yurii8710 5 ปีที่แล้ว +1

    Thanks for simplifying:) good work!

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

    > is direct children selector not direct siblings... thanks for the video.... saves my time on specificity

  • @argishtib
    @argishtib 5 ปีที่แล้ว

    Absolutely love your videos. Wanted to learn web for a long time now, and these videos are perfect!

  • @gabrielferrin
    @gabrielferrin ปีที่แล้ว

    You are the best, man!

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

    Thank you for your clear explanation!

  • @pvdochtend
    @pvdochtend 5 ปีที่แล้ว

    Really awesome videos. I am learning so much!
    I comment about this topic is what I would expect if you have multiple styles sheets linked. What happens with those in the order. Perhaps nice to mention in a future video.
    Keep up the great work!!

  • @adedoyin-emmanuel-adeniyi
    @adedoyin-emmanuel-adeniyi 10 หลายเดือนก่อน

    God bless you man. I totally understand now 🎉🎉

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

    Video was awesome, learned a lot. Thank you for posting it. You earned a new subscriber. ❤️ from India.

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

    OMG!! I finally understand!!! Thank you!!!

  • @hitzhangjie
    @hitzhangjie 4 ปีที่แล้ว

    very nice video, I understand css specificity after watching this video. Thanks.

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

    Simple and clear!

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

    Thank you sir for this good explanation!!

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

    You are my new fave. Thank you.

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

    Amazing explanation✨✨

  • @mesmartboy1985
    @mesmartboy1985 ปีที่แล้ว

    hi i have a question: is it wrong to put inside element??

  • @mohammadvempalli3973
    @mohammadvempalli3973 4 ปีที่แล้ว

    Quick and great explanation 👍👌

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

    You do indeed simplify CSS and all the other tools and technologies you discuss and explain. 🤑😗💰 Knowledge is power and money if you know how to put it in right practice and be consistent in practicing all these knowledge into practical use 😎

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

    I love Web Dev Simplified ♥

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

    Amazing teaching skills, thank you

  • @RNMERIA
    @RNMERIA 4 ปีที่แล้ว

    very well explained , thank you

  • @BloodyClash
    @BloodyClash 5 ปีที่แล้ว

    Very logical and simple exlpained. Thanks :)

  • @jasylingling5760
    @jasylingling5760 5 ปีที่แล้ว

    soooooo well explained! 👏

  • @sonamohialdin3376
    @sonamohialdin3376 ปีที่แล้ว

    Very helpful tutorial thank you

  • @breaktask7132
    @breaktask7132 ปีที่แล้ว

    Awesome brother ⭐⭐

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

    Always end up learning something new.

  • @yashpreetbathla4653
    @yashpreetbathla4653 4 ปีที่แล้ว

    Such an amazing explanation thanks a ton!!!

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

    very simple and useful tnx

  • @LifeIsGood1992
    @LifeIsGood1992 5 ปีที่แล้ว

    great! keep up the good stuff !

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

    CSS specificity is the bane of my existence. Especially with Wordpress designs.

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

    Really loved the way you described this phenomenon. I got this also from a book on css. But I really appreciate the effort you are putting in to teach us. Can you tell me are you doing a full-time job or part-time or youtube is your only source of income. cause I also want to work remotely.

  • @rajfromtamilnadu
    @rajfromtamilnadu 5 ปีที่แล้ว

    Awesome video thanks I loved it

  • @wiksta4316
    @wiksta4316 4 ปีที่แล้ว

    Thanks! I'm here for the second time and learn sth more.

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

    you really did simplify it.

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

    i applaud you thank you so much for this infromation that you have given us for free for us to learn 👍🤞👏

  • @guyfromdoon
    @guyfromdoon 4 ปีที่แล้ว

    You r amazing Kyle.....

  • @puwned
    @puwned 5 ปีที่แล้ว

    Not surprising that nobody disliked it. Who the hell would do that?? :D
    Thanks for the simplified comprehension.

  • @shinichi9do
    @shinichi9do 5 ปีที่แล้ว

    It looks like scoring system.
    Thank you for the explanation.

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

    You're too good man

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

    best explanation
    keep it up

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

    Thank you sir..😊😊

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

    Very useful tutorial

  • @ahmetkarakartal9563
    @ahmetkarakartal9563 ปีที่แล้ว

    amazing, thank you

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

    Good succinct tutorial!

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

    I've been learning java for like the past year and the fact that you can just have random numbers right in the middle of the code and it still runs perfectly is beyond me

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

    Hi, tanks a lot for clear videos. They helps me much.

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

    Hey thanks for these videos it's helpful. Please on subtitles bcoz I'm from India 🇮🇳 it's difficult to understand your accent. Thank you once again ❤

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

    Hi Kyle it's To helpful thankyou

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

    This is great. Thank you. T

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

    as always thanks buddy

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

    Nice explaination

  • @beto.aveiga
    @beto.aveiga 3 ปีที่แล้ว

    The only you can rewrite an inline style is with the "!important" keyword. Also, if you have the "!important" keyword on an inline style, there is no way to overwrite it with CSS stylesheets, just using JavaScript... unless, but in the future, CSS-2050 bring us the "!super-important" keyword... hahaha! Thanks for the excellent video, BTW!

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

    Thank you so muchhhhh!!!!!!!!!

  • @dstaedeli
    @dstaedeli 4 ปีที่แล้ว

    awesome, thanks!

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

    A question here,why to use different classes and ids in a single element?

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

    What about data selectors?

  • @wiksta4316
    @wiksta4316 4 ปีที่แล้ว

    I finally understood it

  • @Собственник-т3к
    @Собственник-т3к 2 ปีที่แล้ว

    ez to understand. thanks

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

    Interesting...
    Although the concept of specificity is easy for UI developer to understand,
    but when we see, as a developer, we can easily see, how it would had been implemented then we will come to a conclusion that, the concept of specificity itself is doom, artificially introduced concept, not related to the implementation code.
    As per my understanding, the concept is that,
    first it picks up each selector, and look for any tag involved, if so then it applies the property to all the elements satisfying the selector criteria
    then it restart from beginning to a second round and looks for all selectors and looks for classes and applies the properties. In case, if there is any element whose property was previously written in first round then will get erased and over ridden by the second round
    Similarly in the third round, it looks for selectors and looks for ids and applies them. Now it overrides the elements of first and second round.
    Then in fourth round goes for element level styling which overrides first three rounds
    then it goes for searching !important and applies which overrides all existing.
    In all these five rounds, assignment of properties to elements goes sequential, so last occurring styling will override all prior styling
    Not sure, if UI developer, who does not usually have program background will grasp this concept
    But now a days, object oriented programmers are focussing on UI thanks to object oriented UI concepts like typescript and dynamic styling patterns of css like frames and frameboxes .
    So, eventually it will become tough for the UI developers to migrate their concepts to think like programmers.
    whoever, wont fit in such conceptual invasion will go out of profession

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

    Hi, im a newbie on the web dev path and was wondering if you'd like to be friends? I'm finding your vids very useful but talking directly for specific doubts would be very helpful! and yeah, I just did subscribe to get up to date for more of your content lol

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

    thanks a ton man

  • @JoakimTveter
    @JoakimTveter 4 ปีที่แล้ว

    How specific are attribute selectors?

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

    the only time I used important was to fix bugs of large legacy application where the original developers were not around anymore.

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

    you are a god

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

    Now I k ow why I was not able to override the predefined styles of bootstrap and tailwind

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

    wow thank you

  • @acttahv1419
    @acttahv1419 5 ปีที่แล้ว

    Good job

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

    Yo you're a god