I know it may sound strange but a lot of developers and engineers still find it difficult to get their way around CSS3 Specificity. If you have doubts of why this color isn't working or why your font isn't responding to your defined styles set then you have no more reason for doubts, join me as we unveil the secret recipes to handling css3 specificity.
According to MDN
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors
In other words it is just a rule-set that web browsers uses to decide which css property with higher priority to add on a given element or selectors that matched it.
There are many ways to calculate specificity but I will be showing you the easiest method, it is called the ABCD method.
A represent style attribute or inline style, which carries the highest priority
B represent the id selector that carries the second highest priority when applied on an element
C represent classes, pseudo elements and attribute
D represent elements
From the above description you will understand that A have the value of 1000, while B have the value of 100, also C have the value of 10, and D have the value of 1.
If only A is applied on an element, it will look like this:
A = 1 B = 0 C = 0 D = 0
And if B is applied on an element, it will look like this:
A = 0 B = 1 C = 0 D = 0
If C is also applied on an element, it will look like this:
A = 0 B = 0 C = 1 D = 0
And if D is applied on an element. it will look like this:
A = 0 B = 0 C = 0 D = 1
Right now looking at the diagram above, I think you have grasp the concept and if you continue practicing and adding each method together open up your mind to endless possibility or understanding.
Let me know what you think by leaving a comment.