Learn CSS Specificity In 11 Minutes
Vložit
- čas přidán 8. 11. 2019
- 🚨 IMPORTANT:
Learn CSS Today Course: courses.webdevsimplified.com/...
CSS specificity is the best and worst part of CSS. It allows you to do some incredible things with CSS especially with variables and responsive design, but when you are first starting out with CSS it is a nightmare trying to figure out how to properly overwrite styles. In this video I will be breaking down absolutely everything you need to know about CSS specificity in only 11 minutes so you can spend your time writing CSS instead of watching CZcams videos. We cover exactly what effects CSS specificity and how to calculate the specificity of a selector through the use of multiple examples so you can quickly comprehend all the complexities of CSS specificity.
CSS Specificity Article: blog.webdevsimplified.com/202...
🧠 Concepts Covered:
- How to calculate CSS specificity
- What selectors effect CSS specificity
- How !important works with CSS specificity
- CSS specificity best practices
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#CSS #WDS #CSSSpecificity
Hi Kyle,
I don't write a lot of CZcams comments, and I'm sure you'll never see this one. When I find myself consistently returning and learning from one particular CZcamsr, 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
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!
Found you like a week ago and I'm impressed by the explenation clarity. Great content, sharing is caring!
bruhbruhbruh
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!
You're the best, you have tutor skills, great explaining!
This is quality content delivered in an easy to digest way. Many thanks!
Thanks for simplifying:) good work!
Outstanding explanation. Crystal clear demonstration. Really well done! 👍
Best explanation of specificity I’ve seen. Thanks!
Thank you for the tutorial, your voice is very relaxing.
This is the best explanation ever! Clean and concise.
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!!
You really have a gift to teach! Thanks for your amazing content!
Simple and clear!
w3 schools was confusing to me for some reason and this vid made me understand it much easier
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
Never knew about the numbers. Thanks so much!
Such an amazing explanation thanks a ton!!!
Very logical and simple exlpained. Thanks :)
I couldnt understand anything in the Odin Project but you made it so much easier, thanks!
OMG!! I finally understand!!! Thank you!!!
very well explained , thank you
soooooo well explained! 👏
very simple and useful tnx
It is so useful. Thank you man.
Quick and great explanation 👍👌
This video is *important* ...
...especially for those who've learned to loathe !important
(9:20) is particularly *important*
Amazing teaching skills, thank you
Very helpful tutorial thank you
You are my new fave. Thank you.
Awesome video thanks I loved it
Thank you Kyle for making me understand this concept :)
I'm glad I could help.
God bless you man. I totally understand now 🎉🎉
Fantastic video, I learned so much!
Would you mind enabling captions please?
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.
Canvas
wondering*
You are the best, man!
Your explanation is great and fast. :) -
very nice video, I understand css specificity after watching this video. Thanks.
Absolutely love your videos. Wanted to learn web for a long time now, and these videos are perfect!
Thank you! I'm glad I can help.
Thanks Man !
Amazing explanation✨✨
And here I was using important on my styles without knowing what was going on. Seriously your tutorials are the best.
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!
great! keep up the good stuff !
Best Web dev content provider..Great work keep up
Thanks for making the topic fun instead of confusing! This reminded me of Linux chmod commands and instantly grokked into my brain. Well done.
This is great. Thank you. T
Awesome brother ⭐⭐
This guy is a genius in explaining complex things
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!
I'm really glad you enjoyed it. Do you have any suggestions for future videos in this vein you would like?
@@WebDevSimplified I will surely think about some topics! Thanks for the reply!
@@iHidden1 bruh ive been waiting two yrs
amazing, thank you
It was so easy to understand. Rather than explaining through all the rules, using those 4 digits was so efficient.
Man!, u gotta be the best instructor for web dev on youtube !
awesome, thanks!
Hi, tanks a lot for clear videos. They helps me much.
Video was awesome, learned a lot. Thank you for posting it. You earned a new subscriber. ❤️ from India.
Thank you sir..😊😊
Very useful tutorial
Big thanks from Wolfsburg 42 peer... your videos help me to learn front-end.
Nice explaination
It looks like scoring system.
Thank you for the explanation.
you nailed it man just 2 minutes in the video I get the point
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.
He is the best web development teacher ever. He has taught all things so good that we remember the concept forever
You r amazing Kyle.....
i applaud you thank you so much for this infromation that you have given us for free for us to learn 👍🤞👏
Good succinct tutorial!
best explanation
keep it up
ez to understand. thanks
as always thanks buddy
Thanks! I'm here for the second time and learn sth more.
Always end up learning something new.
hi i have a question: is it wrong to put inside element??
You're too good man
you really did simplify it.
I love Web Dev Simplified ♥
> is direct children selector not direct siblings... thanks for the video.... saves my time on specificity
wow thank you
I finally understood it
thanks
ty
Good job
A question here,why to use different classes and ids in a single element?
What about data selectors?
you are a god
Not surprising that nobody disliked it. Who the hell would do that?? :D
Thanks for the simplified comprehension.
awesome
CSS specificity is the bane of my existence. Especially with Wordpress designs.
God bless u
How specific are attribute selectors?
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
Yo you're a god
Now I k ow why I was not able to override the predefined styles of bootstrap and tailwind
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 ❤
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
How do you comment something out? I have tried to find that shortcut but I haven't had any luck.
Ctrl + /
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!
the only time I used important was to fix bugs of large legacy application where the original developers were not around anymore.
good
does this apply to all browsers?
Yes, specificity it's part of the original CSS spec. But, not all attribute and pseudo selectors work in every archaic browser version. Id, class, and element selectors are fine.