Among all the concepts you have to understand in CSS, Specificity is a tricky one; and, it may be the reason why that font-size is not being applied to the element you're trying to target. If you want to spend less time yelling at your DEV tools, you should understand how the browser reads your code and decides which styling to apply upon conflicting rules. If there are two or more CSS rules that point to the same element, and changing the same property, the browser gives more weight to the one with the most specific selector. So, given the case, the universal selector * is less specific than an id selector #.  The browser will apply the style of the rule using the latter. Hierarchy, Specificity Value, and Calculation Four (...well, I'd say 5) categories define the level of specificity and they hold different values: *Note: I added a 5th one because it's a good idea to clarify that the Universal Selector and Inherited Style have value of 0 To calculate specificity you should add the values of each selector category and compare the total. The highest value wins! for example: What if they have the same specificity? The general rule is: , but you can keep an eye on the following: the one closer to the HTML wins . Upon conflicting rules, The one appearing latest in the style-sheet wins. The latest . If you have an external CSS style-sheet and also wrote CSS embedded in your HTML, in case of conflicts, the embedded one wins. Position counts This is !important If you have a rule you want to apply, , there is a keyword to override everything: no matter what !important Be careful and keep it as the last resource. It can make a mess out of your code if you over-use it. Maybe that's why it's considered a bad practice. You can read more about the correct and recommended usage in the . MDN web docs More about the subject and references: So, now you know! ...but, if you still want to read more about specificity, check out the following resources, which also happen to be my references for this story: W3Schools Specificity Calculator CSS Tricks I already mentioned MDN You can print these out to have as a QRC: Specifishity CSS Specificity Wars Happy coding!

Target

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Avoid Headaches by Understanding CSS Specificity

Too Long; Didn't Read

Company Mentioned

Angel Cordova

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Avoid Headaches by Understanding CSS Specificity

Too Long; Didn't Read

Company Mentioned

Angel Cordova

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES