CSS Specificity

CSS Specificity helps determine what style will be applied to the HTML element(s) when there are overlapping or multiple CSS rules.

It is a value or weight assigned to a CSS selector. The higher the specificity, the more precedence the selector has.

Example Code

Let's consider the following code

<html>
  <head>
    <style>
      * {
        color: gray;
      }
      #title {
        color: red;
      }
      .h1 {
        color: blue;
      }
      h1 {
        color: pink;
      }
    </style>
  </head>
  <body>
    <h1 id="title" className="h1" style="color:skyblue">CoderrShyam</h1>
  </body>
</html>

Here the question is, what color will h1 be assigned to? This is calculated based on the selector's components which we will discussed in this tutorial.

CSS stands for Cascading Stylesheets. The cascade is the algorithm for solving conflicts where multiple CSS rules apply to an HTML element. It's the reason that the text of the button styled with the above CSS will be skyblue.

Understanding the cascade algorithm helps you understand how the browser resolves conflicts like this. The cascade algorithm has 4 distinct stages.

Position and order of appearance: the order in which your CSS rules appear
Specificity: an algorithm that determines which CSS selector has the strongest match
Origin: the order in which CSS appears and where it comes from, whether that is a browser style, CSS from a browser extension, or your authored CSS
Importance: some CSS rules are weighted more heavily than others, especially with the !important rule type.

Lets look into all these one by one

Effect of Position

If there are two rules that have selectors of identical specificity, the last one to be declared won. In an HTML page, you can add styles in different ways: through a <link> tag, a <style> tag, or directly in the element's style attribute. If you have one <link> tag at the top of your page and another at the bottom, the styles from the bottom one will be used. The same goes for <style> tags; the ones lower down on the page take priority.

An inline style attribute with CSS declared in it will override all other CSS, regardless of its position, unless a declaration has !important defined.

If the browser doesn't support a property, it is ignored!

Specificity

CSS specificity determines which style rules get applied to an element when there are conflicts. Higher specificity means the style will be used. It's calculated based on a point system involving inline styles, IDs, classes, and tag names.

The specificity of a selector is calculated as follows:

Inline styles have the highest specificity and are worth 1000 points.
IDs are worth 100 points.
Classes, pseudo-classes, and attribute selectors are worth 10 points.
Elements and pseudo-elements are worth 1 point.

The specificity of a selector is calculated by adding up the points for each of the selector's components.

For example, the selector h1#title has a specificity of 101 because it has one ID and one element. The selector .h1 has a specificity of 10 because it has one class.

Origin

The origin of a CSS rule is where it comes from. There are three possible origins:

User agent: the browser's default styles
User: the styles you write
Author: styles from a third party, like a library or framework

The cascade algorithm gives precedence to user styles over user agent styles and author styles over user styles.

Importance

The !important rule is a way to give a CSS rule more weight than others. It's a way to override the cascade algorithm. If you add !important to a CSS rule, it will take precedence over other rules, regardless of their specificity.

h1 {
  color: pink !important;
}

In the example above, the h1 element will be pink, regardless of any other rules that apply to it.

Conclusion

Understanding the cascade algorithm is essential for writing maintainable CSS. It helps you understand why your styles aren't being applied and how to fix them. By understanding the cascade algorithm, you can write more efficient CSS and avoid conflicts that can make your styles unpredictable.

CoderrShyam