pipScript

Understanding the Cascade and Specificity in CSS

Understanding the Cascade and Specificity in CSS

Barigbue Nbira's photo
Barigbue Nbira
·

4 min read

Table of contents

Understanding the cascade is crucial for developers to create efficient and effective CSS code that produces the desired results. In this article, we'll take a closer look at CSS cascade, what it is and how it works. By the end of this article, you'll have a better understanding of the cascade and how it works.

What is the cascade?

The cascade is a feature that helps determine how the browser combines multiple stylesheets and resolves conflicts that occur when multiple style rules are applied to the same element on a webpage. This can make it easier to control the appearance of your webpage and ensure that everything looks the way you want it to.

How the cascade works

When there are conflicting CSS rules, the cascade follows a set of criteria to determine which style should be applied to the element with conflicting declarations.

In other to determine which style rule takes precedence, the cascade puts in to consideration:

  1. Origin of CSS.

  2. Specificity.

  3. Source order.

Origin of CSS

CSS can come from different sources. In an attempt to resolve conflict declarations, the cascade first checks the source/origin of the stylesheet. The most common of them all is the CSS written by the developer. CSS Source includes:

  1. Author declarations - These are the CSS code written by the developer.

  2. User declarations - These are the CSS code that originates from the user. A great example of this is when the user modifies the font size of the browser.

  3. Browser declarations - This is the default style that applies when there is no declaration from either the author or the user. For instance, a link is blue and underlined by default, and this is a default declaration coming from the web browser. This is also called the "user agent" declaration.

The cascade gives importance to style declarations based on their origin or source and applies the style rules coming from the most important. CSS origin from most important to least important:

  1. User declarations marked with the !Important keyword.

  2. Author declarations marked with the !Important keyword.

  3. Author declarations

  4. User declarations

  5. Browser declarations (default)

It is important to note that the most common source of conflicting CSS declarations is usually from the styles declared by the developer. Without !Important keyword, all the styles within the Author stylesheet have the same importance (They all come from the same source), hence the cascade moves on to the next factor, which is specificity.

Specificity

When multiple CSS rules target the same element, the cascade uses the specificity of the selectors to determine which declaration should take precedence. The rule with the highest specificity level will be applied to the element. Selector specificity from highest to lowest:

  1. Inline styles - They have the highest specificity, but it is usually a bad practice to use inline styles.

  2. IDs.

  3. Classes, pseudo-classes and attributes.

  4. Elements and pseudo-elements.

Note: The univerasal selector * has no specificity.

The code below is just to illustrate how specificity works. As you can see from the snippet below, there are conflicting declarations.


div {
text-align: centre;
background-color: blue;
}

#div .div:hover{
Text-align: centre;
background-color: orangered;
}

.div{
Text-align: centre;
background-color: yellow;
}

main #div .div  {
Text-align: centre;
background-color: green;
}

Calculating the specificities

//specificity = 0001
div {
text-align: centre;
background-color: blue;
}

The cascade evaluates the frequency of a selector and its significance. The element does not have an inline-style, so its value will be 0, does the element have an ID? no, ID = 0, Class? no, class = 0. The "div" element was selected directly, it gets a value of 1. (Inline styles = 0, IDs = 0, Classes = 0, and Elements = 1). As a result, the specificity for this code is (0001).

//specificity = 0010
.div{
Text-align: centre;
background-color: yellow;
}

(Inline styles = 0, IDs = 0, Classes = 1, Elements = 0). The specificity for the above code is (0010).

//specificity = 0111
main #div .div  {
Text-align: centre;
background-color: green;
}

(Inline styles = 0, IDs = 1, Classes = 1, Elements = 1). The specificity for the above code is (0111).

//specificity = 0120 
//Classes, Psedo-classes and attributes are grouped together.
#div .div:hover{
Text-align: centre;
background-color: orangered;
}

(Inline styles = 0, IDs = 1, Classes= 2, Elements = 0). The specificity for the above code is (0120).

The most specific CSS rule gets applied, in this case, the rule with the (0120) specificity gets applied. The div will have the color orange-red. The value of the winning declaration is known as the cascaded value. In this case, orange-red is the cascaded value.

Source Order

In a situation where all the conflicting declarations have the same specificity, the cascade simply applies the style rule (declaration) that comes last.

Conclusion

In conclusion, the CSS cascade is a powerful feature that underpins the entire CSS language and is essential. Whether you're a beginner or an experienced developer, the CSS cascade is a concept that's worth mastering.

CSSWeb DevelopmentDesign