To make it easier to imagine, imagine your Specificity as a ranking of CSS rules, which CSS rule is higher, and it applies to the element.
So what is that ranking like? Let's find out in TipsMake.com in the Specificity Hierarchy hierarchy below.
If there are two or more CSS rules that target one element, then the browser will follow only one rule, see in the CSS rule list which is the highest rule to select and apply to the element.
Here we will have the rankings for CSS rules so that the browser obeys when applying CSS, arranged in priority order from top to bottom:
Calculate the value of CSS Specificity to see which rules apply to the element, making it easy to make mistakes when writing CSS.
Specificity is counted as positive integers. As follows:
For example:
A: h1
B: #content h1
C:
Because 1 rule (C) has the highest priority, so the background color for h1 element is white (#ffffff).
Where we have two equal CSS rules like this:
Obviously, the element's specificity value is the same (all h1 elements) now we will rule which selector is closest to that element to be applied. So the result will be:
In case we have CSS rules like this:
By law, ID selector will be applied. The result is:
A class selector like .intro will "defeat" every single element like h1, p, div .
For example, in the following situation:
From external CSS file:
In the HTML file:
The second rule will prevail.
Universal selector or CSS's entire selection symbol (*) will select all objects of any type.
/* Chọn tất cả đối tượng */
* {
color: green;
}
Universal selector has specificity of 0 and properties have values that are inherited, also have specificity of 0.
Last lesson: Unit - Unit of measurement in CSS
Next lesson: Rounded Corner in CSS