1. What is specificity?
Specificity (or precedence) is how the browser decides which css property to apply to an element when there are multiple css rules pointing to that element. Specificity based on matching rules includes different types of CSS selectors.
2. The hierarchy of specificity
Each selector has its place in the hierarchy. Selector specificity has 4 levels (as shown): 
3. How to calculate specificity?
We represent the specificity of a selector as follows:
- 1-0-0-0: Inline styles
- 0-X-0-0: Number of ID selector
- 0-0-Y-0: Number of classes, attributes and pseudo-classes
- 0-0-0-Z: Number of Elements and pseudo-elements Consider the following example:
| Selector | Thousands | Hundreds | Tens | Ones | Total specificity |
|---|---|---|---|---|---|
| h1 | 0 | 0 | 0 | first | 0001 |
| h1 + p :: first-letter | 0 | 0 | 0 | 3 | 0003 |
| li> a [href * = “jav”]> .active | 0 | 0 | 2 | 2 | 0022 |
| #identifier | 0 | first | 0 | 0 | 0100 |
| Attributes are written in style attributes | first | 0 | 0 | 0 | 1000 |
There is a slight confusion often seen when following this table. Consider the following case:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> a1 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> a2 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> a3 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> a4 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> a5 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> a6 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> a7 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> a8 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> a9 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> a10 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> a11 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> box <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Age of Empires <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
1 2 3 | <span class="token selector">#box</span> <span class="token punctuation">{</span> <span class="token property">color</span> <span class="token punctuation">:</span> blue <span class="token punctuation">}</span> <span class="token selector">; // Độ đặc hiệu: 0100 .a1 > .a2 > .a3 > .a4 > .a5 > .a6 > .a7 > .a8 > .a9 > .a10 > .a11</span> <span class="token punctuation">{</span> <span class="token property">color</span> <span class="token punctuation">:</span> red <span class="token punctuation">}</span> <span class="token punctuation">;</span> // Độ đặc <span class="token property">hiệu</span> <span class="token punctuation">:</span> <span class="token function">00</span> <span class="token punctuation">(</span> 11 <span class="token punctuation">)</span> 0 |
The result is blue. Because the class nature is only specific in the hundreds (X-0-0). No matter how many classes are nested, it will only work for selectors of equal or lower specificity.
Note:
- Universal selector (*) and combinators selector (+,>, ~) do not increase specificity.
- : not (x): Negation selector (: not) has no value, the new (x) argument increases specificity.
- Don’t overdo inline styles and! Important, love yourself later!
4. Summary
Specificity with selectors is one of the most important issues in css. Knowing this will help us easily develop and maintain the application.
References:
https://www.w3schools.com/css/css_specificity.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity