CSS Specificity
► Specificity is how browsers decide which CSS property values are the most relevant to an element and will therefore be applied.
If you have ever been in a situation where you have tried to apply a given style to an element and find that for some reason that it just won’t apply, it is most likely due to specificity.
Somewhere in your stylesheet (or even in another stylesheet) you will have a more specific selector containing styles that take precedence and overrule what you are attempting to apply.
So in this video, we are going to demystify why this strange behavior occurs, and how developers can completely avoid specificity problems. That’s all that specificity is about really. Learning how some CSS selectors, are more specific and will override other selectors.
We will also learn how to calculate specificity scores in the same way as browsers do, and I will also show you some cool tools that you can use to make these calculations.
► Timestamps:
0:00 Start
1:25 Why your styles don’t always apply
2:14 What is specificity?
3:16 The sandbox project & getting the files
4:21 Styles applied through inheritance & with basic selectors
5:07 Class selectors override element selectors
5:27 Looking at clashing styles in DevTools
5:53 Clashing styles & specificity
6:33 ID selectors override class selectors
7:26 Selectors with matching specificity
8:08 Matching selector specificity from multiple stylesheets
9:37 Specificity scores
10:35 Inline styles override all CSS selectors
11:15 The !important keyword
15:06 How to calculate specificity scores
17:57 The Specificity Calculator
18:48 The importance of columns and commas in specificity score calculations
19:37 CSS Stats
20:39 The Specificity Graph
21:42 Summary
► Get the code:
GitHub Repo: https://github.com/craigabourne/css-s...
CodePen Example: https://codepen.io/craigabourne/pen/a...
CodePen Start: https://codepen.io/craigabourne/pen/Q...
CodePen End: https://codepen.io/craigabourne/pen/M...
► Links used in the video:
MDN Specificity - https://developer.mozilla.org/en-US/d...
CSS Tricks: https://css-tricks.com/specifics-on-c...
Smashing Magazine: https://www.smashingmagazine.com/2007...
Specificity calculator: https://specificity.keegan.st/
csstats.com: https://jonassebastianohlsson.com/spe...
Specificity graph: https://csswizardry.com/2014/10/the-s...
► This video is part of the CSS for Absolute Beginners playlist: • CSS for Absolute Beginners
► Social Media:
/ craigabourne
/ craigabourne
► Code & Projects:
https://github.com/craigabourne
https://codepen.io/craigabourne
Watch video CSS Specificity online without registration, duration hours minute second in high quality. This video was added by user Craig A. Bourne 29 July 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,177 once and liked it 108 people.