CSS Specificity explained
HTML-код
- Опубликовано: 10 янв 2018
- A look into CSS specificity, from how it's calculated, from tags, classes, IDs, and inline styles, as well as how !important comes into it, as well as advice on how to avoid running into specificity wars!
Specificity, other than a word that I have a ton of troule saying, is something that not enough new developers understand, and it can lead to some really bad habits. Understanding how it works both makes your life easier, and leads to better code overall!
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
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 RUclips channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
This video is very !important
Well that just made my day 😂
I hope thats not the js !important xD
@Tech Wannabe lol in css !important is the most specific thing, this thing wins everytime :)
The Odin Project bought me here and boy am I glad they did! Top notch explanation and it was very simple to understand. Subbed!
same here!
This is definitely the best tutorial on specstzfszscity out there! :p lol. Now seriously, great job man. Specificity issues is extremely recurrent amongst beginners (and not-so-beginners), I see questions about it every day on the forums. I'll make sure to route them to this video from now on :)
Big thank you, Facundo, I really appreciate that! I had to do my intro about 12 times because I couldn't say it properly, and you can here my hesitate a couple of times after I say it in the video, because I'm not sure if I said it correctly or not, lol.
Good teacher always makes things simple and easy to understand, bad teacher more likely to have content that student feeling hard to understand, no matter what the difficulty the source material is.
This is what I learned from a someone who teach web develop too, the simpler/easy the video looks like, the more hours it takes to make, and many people don't actually realize it.
This man throwing in extra vowels all over the place with his SPECIFICICITY
I know, I didn't realize I was pronouncing specificity wrong all these years.
7:50 "specificicity"
Thank you so much, Kevin. I have learned some portions of the CSS a couple of years ago and now I just came back to learn front-end development again and the problem is, the sources out are mostly about starting from scratch. but I hope to learn faster and in a more fun way with your wonderful concise but truly more than enough videos.
I really had to laugh when I saw the arrow of divs filling up the whole editor :D
I've just started learning html & css. It's much easier with your content Kevin.
I appreciate that.
Big thanks!
This is giving me a lot of context beyond just learning the definitions of elements/attributes/classes/IDs. Thank you!
THIS video. Of all the videos I've watched from you, this is the one that makes the most sense.
Thank you.
Going to go thru every video in your series. Every one of your videos has been very clear and concise. Keep up the good work sir!
Thanks a ton Richard!
Great video as always. I would say I have an intermediate understanding of css but never really thought about specificity like you explained it. Going back to the basics always teaches me something I overlook sometimes.
Thanks Paulie! At one point, we sort of take it for granted once things are working, and hey, if it works, it works so it's not that big a deal, but it is always good to understand exactly what's actually going on too, specially if you start using frameworks, or working with other peoples code, and you start running into issues.
Nice video, very soothing voice, and actually understood everything you tried to say. Have watched like 5 tutorials on this, and this is an awesome closing, now I think I understand CSS rules very well
You are just awesome. This video helped me to understand CSS specificity in 15 minutes. Thank you so much for making this video :)
Thank you Kevin! this helped a lot, I never knew I would enjoy styling and CSS this much but I am having so much fun with it.
That 15 div exemple was an eye oppener
Thank You : )
this was the most helpful tutorial ever. I guess all my problems until now were because I didn't know all the info about the specificity. Thank you so much!
This concept is very important in Css and you explanation also very Good keep it up Man..thanks for making this video
Amazing! It's helped so so much!! Thanks Kevin :)
What I've heard is just great! An explanation of all times. Seriously, i'm not kidding. Kevin is a very good teacher. Subscribe to Kevin's channel immediately. You won't hear such explanations even on paid platforms !!!!
Let me just say that this is the best explanation I encountered so far
Subbed. This made specificity more clear than anything else I came across.
Specificisity, I love it when you say that!
I watched a lot of other css learning videos in the last weeks and your later videos. Dude stop it. Go out of my head :) You're covering all those questions in your videos. You deserve every click, every good comment and every thumbs up! Cheers Sensei!
Hi Kevin, I really apreciate your work!! Thank u!! Greetings from Argentina, Buenos Aires :)
This is one of the best videos on CSS Specificity. Thank you very much.
No problem at all, really glad you liked it :)
Cut and clear Explanation thumbs up Kevin (Y)
Great video. Thank you, kevin powell
I think, using element selectors have its use case. I mostly use a base layout and base design css files, and I specify arrangement of items in the layout file, like grids, flexboxes, fixed headers or so, but no any color, border or anything theme-like property. And in the base design file, I usually list basic elements only, and resetting their look to a default I think it should be the very "unthemed" default for the site. For example I remove default button outlines, text-decoration on links, some default font size and family. I always want border-collapse on tables for example, I set that here too. If it is a webapp, and I know I consistently going to use an tag for icon inside an or tag, I usually set the default style (some spacing between them) as a > i, button > i selectors respectively.
These are always the lowest specific selectors after all, and mostly getting either overridden or extended further with more propeties by the specific classes I add later on.
thank you for this, super clear!
Thank you very much this was very clear!
Had confusions after the cascades lesson i had until watching your video. Thanks!
6:28 Using Bootstrap you'll find yourself in this situation quite often with nested containers, rows and cols ;)
Subscribed!! I needed this information
Thanks for the sub, and glad you liked the video :)
thank you Kevin you saved me ton of headaches 😊👍👍👍
Thank you very much for the explanation Kevin. Could you please go through the combined selectors, classes and divs. Thank you again
Great content. Thanks.
Great video!
Thank you for this useful video
Finally, Information I can understand.
Thanks Kevin 🙂👍
Thank you!!
The last trips will be helpful for me!
Great video
was here.
This video is TOP! 😀
Thank you !
Class-y video ;) [Joel runs off to start converting his endless array of ids into classes]
Good job.
Perfect explanation Kevin, the specificity of this video is very high, or is it low, I get them confused now 🙂
Just what i needed
Awesome, glad it helped :D
sir you are great. tysm for all this video. Love from India.
No problem at all, glad you liked it 😁
Thank you very much!!
You're welcome 😁
thx hombre.
Nice job, thank you!
After understanding specificity, i'd like to ask about your title font - it's actually pretty good. From a quick search i did, I didn't find any look-alike font, so how did you do it? :D
Hi Kevin can you tell me which font-family are you using in VsCode
actually, I love css now !!!
Hey Kevin. New to css and new subscriber.really love your vids
What id like to see is your process.
Imagine you have an image with a design you did for a site. Im lost as to how i should start with this.
How should i build the markup?
Should i start with layout?
What layout system should i use?
Etc...
Would be nice to see you walk through your process with building out a simple web page with a few tiny bells and whistles
I have a few series where I build out a full, single page! Check out my playlists, you'll find them in there :). Takes a lot of practice, but it gets easier with each project you do.
@@KevinPowell thanks man will definitely do so
thank you
Thanks for the infor but I'm not sure I agree with the premise.
Having globabl element selectors to style you entire app (or reset browser defaults) is a good idea.
As to avoid inline styles - there are modern practices that basically do everything without writing css classes (like tailwind) which is similar to inline styles. This of course means that you can't overide stuff, but why should you? If you need to make you components customizable / themeable, you can use css variables, which is a more robust way of doing it anyway.
Another option is to reuse components state logic without view (via react hooks, for example), and let the consumers build the view and style it however they want - this approach is more flexible and avoids overiding issues.
We used to make shared components overridable but it just resulted in nightmarish, long, hard to mentain, confusing and mistake prone sheets.
Better to use the modern practices shared above and avoid the idea of css overrides and specificity all together.
Thanks for tutorial :)
You're welcome!
Thank you Kevin it's very useful and informative. And I want to know how to get the live preview on Visual Studio Code(?)
There might be an extension bfor VS Code. Personally, I use Prepros when doing videos, and gulp when working on large projects. I made a video on how ruclips.net/video/h24noHYsuGc/видео.html
Thank you Kevin
Thank you so much....#LOVEIT
Glad you liked it Mahendra :D
I love your all videos...You are awesome teacher....I ever seen
8:39 So you should mainly use ids for linking, not customizing?
Very informative (y)
Thanks John, glad you liked it!
Hello. Which font you are using in VS CODE here.
Thanks!
Thank you so much!
I wanted this video to keep going forever lol
So specificity takes priority over cascade? I didn't know that. Thanks KP.
It seems that sometimes you say this word like "specifi-ci-ci-ty" instead of specifi-ci-ty))
Great tutorial. Thank you!
Haha, I do for sure, I have so much trouble saying it properly, lol.
How do I get those fancy squiggly brackets you have?
kevin is help me with css *sorry for my english
Can you please mix specifity with types of css selectors , that's make it consfusing like using .div ~h3 > p and what not ,I think you got what I want to say ,not for this example ,the more complex one .
" I don't want to see you guys in this situation " . It looks like my first actual site I made for the css block 🤣
If you are doing really complex animations with css you might have all those divs
To make it easy, know that the closer to the left the specificity is, the more it overrides other elements.
And the fog cleared. Thanks
Awesome, glad it helped!
6:29
omg my eyes haha just typing it must have been cringy
Thank you so much 😊
I’m facing an issue where
Home
About
Login
The issue is when i use in css like this
Li {
Text-align: right;
}
Doesn’t work understandable however when i do
Ul {
Works just fine for all of them
}
My issue is tried div and class to specifiy one of them to go right it is not working not sure i get that can you please explain it ?! Thank you 🙏🏻
2:53 "Right now I'm using my body and other things so I can also do a pee" - KP
ahuevo men, gracias, i lob u
Hello Kevin, what font-family do you use in your text editor? Love it and the video too!
Sorry sorry for the super late reply Andrej! I use Input input.fontbureau.com/
Kevin Powell thank you very much!
i just learned about it and i'm having a hard time to understand it. Hope your video helps.
I don't envy anyone who has to say "Specificity" so many times.
I'm so confused about how for example global attribute can overwrite the color red, even if an id class using !Important, but at the same time the border property inside the same class wins over the global attribute. This make no sense to me and I don't know where I can find information about how this works.
Watching all these videos is giving me an itch to make evil code. 😉
Thanx! But i didn't understand one thing. This is from spec: "Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity" (drafts.csswg.org/selectors-3/#specificity)
Soo, if we have situation with 15 divs, it means c=15, b=0 a=0, concatenating them: 0015, when selector .definition (a=0 b=1 c=0) gives us 010, so how does it work though? Or may be for this case we should take c=00 for calculating specificity of class' selector, then concatenating gives us 0100 specificity and as number it is more than 0015, is not it?
Bascially it's not a single number, like 001, or 010, 100, etc, but three separate groups.
So, 0 0 0. So 15 divs would be 0 0 15. One class would be 0 1 0.
As long as the "second" group has anything in it, it would be more specific than even 100 individual element selectors
@@KevinPowell Yes, I know, but i am disappointed because of this line in spec: "Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity", why do I need to concatenate those groups though?
6:29 l was about to try that out lmao
body vs h1 which one will win?
...for something in an h1 tag? The h1, as you're targetting it specifically. If you change the color of the body, for example, the reason the h1 (and other text) changes color is because it's default property is inherit, so it's inheriting that color from the body. When you change the h1 color, you override inherit with a color, and it will change it.
yea i did not know about inheriting, all i am thinking is they both have same specificity, then why the colour is changed, but then as you have explained the property comes after wins cleared my doubt
TOP was here
Hey, Kevin !
I reckon I got the fix to your *specificity* problem.
Speak at x 0.25 😆
specify sea city :)
Watching you speak specificicity i started fumbling myself
Odin! >:)
On the last part Kevin is naming a class with two underscores. Why is this?
meanwhile working with wordpress themes... everything is inline style AND important....
"Specificicity" 😋
Who else is coming from The Odin Project
Just use !important if you're going to DIE!!!!
Wish WP template and plugin creators wouldn't always use !important. They do it ALL the time... So annoying.