Learning CSS Part 8 : Order of Priority CSS Selector (Specificity)


On the learning CSS tutorial this time I will discuss the order of precedence of CSS selector to-specific-an selector is used, or in terms of the English language: “CSS Specificity“.

Sense into specific CSS selector

If in the previous tutorial we have discussed the order of priority based on the CSS source code the CSS (the inline style where the strongest have priority), on the article this time we’ll see the order of priority of the CSS code if all the CSS code is in the same file. In this case, we will study what would happen if some of the CSS code that was made mutually overwrite.

To make it easier to understand, I will immediately make our sample file, i.e. specific.html :

Before you run the specific.html file, please note in advance defenisi CSS above. There are 5 types of selector that is ‘ trying ‘ to change the color of a paragraph. And please what the creature would have guessed paragraphs “are learning CSS …”.

See the Pen Sense into specific CSS selector by webspoints (@webspoints) on CodePen.

And, as we see, the paragraph seemed orange, where the CSS selector “#aaa” is where pendefenisisan the color “color: orange“, but how can this happen? What about the 4th defenisi?

The answer: because the selector #aaa is considered the most specific or detailed most of the other selector.

How to calculate specific CSS Selector

CSS has certain rules about to-specific-Ness selector, i.e. when a property from the CSS, mutually overwrite each other, the most specific selector will win.

The rule to specific CSS calculated using the formula 4 digits, for example: 0.1 0,0,0. The calculations are the same as our daily hitung-hitungan, where 0, 1, 0, 0 is greater than 0.0, 1 .5, or to make it easier the value 0, 1, 0, 0 can be written be 0100, and a value of 0, 0, 1.5 becomes 0015.

Here is the CSS Specificity value for selector in CSS :

  1. Each element/tag selector is worth 0, 0, 0.1
  2. Every class selector, the selector attribute table is worth 0, 0, 1.0
  3. Every ID selector is worth 0, 1, 0.0
  4. Any inline style is worth 1, 0, 0,0

By using the rules, let’s calculate the numbers to-specific-ness in the previous example.

  1. The selector p, consists of only 1 tag selector, then the value is: 0, 0, 0.1
  2. Selector div p, consists of 2 tag selector, then the value is: 0, 0, 0.2
  3. #Aaa selector, ID selector consists of 1, then the value is: 0, 1, 0.0
  4. Selector body div p, consists of 3 tag selector, then the value is: 0, 0, 0.3
  5. div p.sentence selector . sentence, consisting of 1 class selector and 2 the tag selector, then the value is: 0, 0, 1, 2

From the results we are getting, then the selector #aaa have the highest value, i.e. 0.1 0,0,0. Then, because that’s the paragraph in the example specific,html creature will be orange.

Get to know the command! important

If the above is not enough priority rules, CSS provides the ultimate “weapon“, i.e. use the !important.

Command !important put behind propery of CSS, and command !important is going to take over the order of priority CSS we learned above. Let’s change the to add specific.html commands !important.

Look at the end of the line in selector p, I added the command !important end of property, and as predictably, paragraphs we will now be colored red.

See the Pen Get to know the command by webspoints (@webspoints) on CodePen.

In CSS tutorial this time around, it could be said that the design of the CSS code actually leaning more to art than programming. Because in addition to figuring out how the look of the web, we should also pay attention to the rules of priority and specific CSS-Ness, and mengombinasikannya to make the website look beautiful.

In the next CSS tutorial, we will discuss the nature of the decline in the CSS, or often referred to also by Inheritance in CSS, which is about the decline of the CSS effects from a tag to tag others.


Please enter your comment!
Please enter your name here