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:

► Links used in the video:

► Social Media:

► Code & Projects:

[maddiecurry]

your videos are literally the best. I had a hard time understanding different concepts, but after watching your videos I totally understood them. Great job!

[caoimheshields]

Only found you recently and I'm impressed by the explenations. Great videos. Sharing is caring!

[jakubslavicek]

This channel is so gut I had to subscribe
800th subscriber!

[simonbielik]

Thanks for showing how to calculate the specificity score

[davidbreitner]

Any plans for something on color theory? Knowing what colors to use is a nighmare

[ovidiu]

Spefici... specififi... spesitificy.... spefisifisy... specifitisy... This word should be banned.