CSS specificity

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.







This is the div element


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:

Heading

  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:

CSS specificity Picture 1

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

In case we have CSS rules like this:









 

Website TipsMake.com





By law, ID selector will be applied. The result is:

CSS specificity Picture 2

3. Class selector will have a higher specificity value than element selector

A class selector like .intro will "defeat" every single element like h1, p, div .








Website TipsMake.com




CSS specificity Picture 3

4. Specific context selector will have higher specificity value

For example, in the following situation:

From external CSS file:

 

In the HTML file:

 

The second rule will prevail.

5. Universal selector (*) and inherited value with specificity of 0

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

4.5 ★ | 2 Vote

May be interested

  • Check out the 'buffalo' Pokémon in Pokémon GoCheck out the 'buffalo' Pokémon in Pokémon Go
    each type of pokemon has hp, cp, ability to attack and endure differently. based on these indicators, players can determine as well as choosing the most powerful pokemon for their offensive tactics.
  • Sitting home can also locate Pokemon around, do you believe it?Sitting home can also locate Pokemon around, do you believe it?
    the tightening of the niantic developers' rules to prevent players from abusing the support tools also brings annoyance, such as those who have no conditions to move much, go away, it is hard to know. get the location of the pokemon around the area they live in
  • 5 undeniable benefits when playing Pokemon Go5 undeniable benefits when playing Pokemon Go
    get to know many new people, breathe fresh air, relieve stress, increase concentration thanks to going out for a walk .... are compelling reasons to force you to try pokemon go now .
  • Want to earn the fastest Pokécoins in Pokémon Go? So don't miss this article!Want to earn the fastest Pokécoins in Pokémon Go?  So don't miss this article!
    pokécoins in pokémon go play the role of buying items in the store. the more coins you earn, the more likely you are to buy more items. to earn pokécoins, players will have to complete certain tasks or buy real money.
  • Pokémon systems when fighting in Pokémon GoPokémon systems when fighting in Pokémon Go
    each pokémon system in pokémon go has different strengths, along with a specific weakness. this type of pokémon will have the power to attack the other pokémon, but can defeat the other pokémon. if you know the characteristics of each type, it will be easier to choose which pokémon to battle.
  • The terms you need to know when playing Pokémon GoThe terms you need to know when playing Pokémon Go
    pokémon go is the most prominent name in recent days. this game of capturing and training virtual animals has created a relatively new way of playing, as players have to constantly move to catch pokémon. during the process of joining pokémon go, you will encounter and use a lot of important terms. so what do they mean?
  • How to play Pokemon GO on Windows computersHow to play Pokemon GO on Windows computers
    recently, pokemon go has become a popular game, attracting thousands of gamers around the world. in previous posts network administrator has guided you on how to play pokemon go on android devices and ios devices. in the article below, network administrator will guide you how to play pokemon go on windows computers using bluestacks emulator software.
  • How to become a good Pokémon Go hunter?How to become a good Pokémon Go hunter?
    with a new way of playing, pokémon go has created a new phenomenon in the game village around the world. players will have to go around and find pokémon for themselves. so how to quickly catch pokémon and in large numbers?
  • Things to know to upgrade Pokémon in Pokémon GoThings to know to upgrade Pokémon in Pokémon Go
    the whirlwind pokémon go has spread its power right on the first day of its release. everyone rushed to the street to find a pokémon for themselves. therefore, in order to become a pokémon hunter, you need to master the basics of participating in pokémon go battlefield.
  • List of medals received in Pokemon GoList of medals received in Pokemon Go
    in addition to getting items when leveling up, gamers who join pokemon go also have the opportunity to receive their proud achievements.