What is CSS Specificity?

If there are two or more CSS rules that conflict with the same element, the browser will follow some rules to determine the priority for rules, which ones have the highest priority. will be applied.

We have the following example to make it easier to imagine:

In the code below, the background-color section for the div element was simultaneously reviewed twice in both #test selector with red background and selector div with yellow background, running the result will produce The output has a red background because the id #test has a higher priority than the other object.

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.

Specificity rankings - Specificity Hierarchy

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:

1. Inline style : set CSS properties directly inside an element.
   For example:
2. ID: set CSS properties for a unique identifier in a page.
   For example: #menu, #header
3. Class, attribute, pseudo-class: eg class like .menu, .header ., attributes like a [target] and pseudo-class like: hover,: focus .
4. Element, pseudo-element: element such as h1, h2, div, p . and pseudo-element such as :: before, :: after, :: selection.

Calculation Specificity

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:

1. Inline style is 1000.
2. ID is 100.
3. Class, attribute, pseudo-class is 10.
4. Element, pseudo-element is 1.

For example:

 A: h1 
 B: #content h1 
 C: 

1. A is 1 (an element is h1).
2. B is 101 (an ID is content, an element is h1).
3. C is 1000 (inline style).

Because 1 rule (C) has the highest priority, so the background color for h1 element is white (#ffffff).

Rules for Specificity

1. If there are equal Specificities, the last write rule will be applied

Where we have two equal CSS rules like this:

Website TipsMake.com - Heading 1

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:

2. ID selector will have a higher specificity value than Attribute selector

In case we have CSS rules like this:

Website TipsMake.com

 /* Chọn tất cả đối tượng */ 
 * { 
  color: green; 
 }