The today over lesson is about the CSS Specificity Continued. How to Calculate Specificity? I hope this lesson is useful for you.
Memorize how to calculate specificity! Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element. Consider these three code fragments below:
The specificity of A is 1 (one element) The specificity of B is 101 (one ID refernce and one element) The specificity of C is 1000 (inline styling).
Since 1 < 101 < 1000, the third rule (C) has a greater level of specificty, and therefore will be applied.
Equal specificity: the latest rule counts – if the same rule is written twice into the external style sheet, then the lower rule in the style sheet is clsoer to the element to be styled, and therefore will be applied:
The latter rule is always applied. This is how Specificity rules apply for using same styling twice!