Specificity refers to the relevance of a particular CSS style to a page element that is being affected by multiple CSS styles at the same time. That is, it refers to the degree of importance of one style over another.

The greater the specificity that we are giving to a style, the greater the probability that this style will be applied in the end. To do this, the CSS rules follow an order of precedence.

The order of priority goes as follows, from least to most specific:

• Title selectors (eg: p) and pseudo-elements (eg: :before)
• Class selectors (eg: .ejemplo), attribute selectors (eg: [type="text"]and pseudo-classes (eg: :focus)
• ID selectors (eg: #ejemplo)

However, in addition to all these specifics, if we use inline styles they will override any styling on the external CSS pages. It could be said that inline styles have the most specificity, therefore, we should never use inline styles in our page .

Example of styles with an ID on a class

#parrafo{
   color: green;
}

.parrafo{
   color: red;
}

<p id="parrafo" class="parrafo">Esto es una prueba</p>

As we can see, we have two styles that refer to the paragraph (the ID #parrafoand the class .parrafo) and, according to the cascading model that CSS uses to apply the styles, the class should be applied .parrafosince it is placed last in the CSS file. . However, we see that this is not the case.

This is where specificity comes into play, and having an ID that has higher specificity than a class, it is the style corresponding to the ID that is ultimately applied.

Example of inline styles on an ID

#parrafo{
   color: green;
}

<p id="parrafo" style="color: red">Esto es una prueba</p>

As we can see, the paragraph, even though it has an ID (element with greater specificity) with a green color style, is not applied because it also has inline styles and, therefore, the latter are applied as they have a greater specificity.

EXCEPTION: The use of !important

CAUTION!!: The use of the declaration !importantis considered a bad practice. I explain it in the next point.

The declaration !importantassociated with an element's style ignores the specificity of the rest of the styles applied to that element and applies the styles marked with that declaration.

Referring to the first example:

#parrafo{
   color: green;
   font-size: 15px;
}

.parrafo{
   color: red !important;
   font-size: 3px;
}

<p id="parrafo" class="parrafo">Esto es una prueba</p>

Based on this example, and based on CSS specificity precedence ordering, the text should be green and 15px font size (because of the ID). However, we see that the resulting text is red and with a font size of 15px.

Why is this happening? Because even though the red color is contained within a class that has a lower specificity than an ID, the declaration !importantignores the specificity's priority order and sets this style as the one that takes precedence over the others.

Why is the use of !important considered bad practice?

Because it totally breaks the CSS rules and makes it very difficult to maintain our CSS.

For example, let's imagine that we want all the paragraphs on our page within a div to be green, except for two paragraphs that will be red and purple respectively.

A possible solution could be the following:

.coloreados p{
  color: green;
}

#rojo{
  color: red;
}

#morado{
  color: purple;
}

<div class="coloreados">
  <p>Este es de color verde</p>
  <p>Este es de color verde</p>
  <p id="morado">Este es de color morado</p>
  <p>Este es de color verde</p>
  <p id="rojo">Este es de color rojo</p>
</div>

As we can see, all the paragraphs inside the div with the class .coloreadosare affected, except two, to which we have assigned an ID, #moradoand #rojoand which are applied to said paragraphs because they have greater specificity.

But what would happen if we used the statement !importantin the class .coloreados?

.coloreados p{
  color: green !important;
}

#rojo{
  color: red;
}

#morado{
  color: purple;
}

<div class="coloreados">
  <p>Este es de color verde</p>
  <p>Este es de color verde</p>
  <p id="morado">Este es de color morado</p>
  <p>Este es de color verde</p>
  <p id="rojo">Este es de color rojo</p>
</div>

As we can see in the example above, the styles for the IDs #moradoand #rojoare not being applied even though they have higher specificity than the class. This is due to the use of !important.

The result of the previous example is a problem since we could only overwrite these styles with another one !importantassociated to each one of the IDs, which limits us a lot when applying the CSS rules, which implies that it is much more difficult to maintain. .

So should I never use !important?

No, there are times (very few) that there is no other option than to use the declaration !importantor that it comes in handy for very specific cases. In my opinion, these cases would be:

• When there is another declaration !importantapplying to a particular style
• In third-party libraries that they make use of !importantand therefore cannot otherwise override (unless we modify the library's styles directly)
• In case you want to create classes to give a common style to all the elements of a specific type of your page. Eg: that all the ones h1on your page have a blue color and a certain font. In this way, you "make sure" (unless there is someone else !importantwho overwrites them) that all h1of your page will have the same style.

conclusion

Whenever possible, we should make use of CSS specificity to apply our styles and try to override the ones we already have.

We should NEVER abuse the use of !important, as it will require more effort when maintaining and applying the CSS rules on the styles of our page.