Introduction to CSS Cascade

A Cascading Style Sheet (CSS) is a language consisting of a set of rules that determines the layout of a webpage. We all understand to a certain extent that the page displays which rule comes later, i.e., the later rule overrides the earlier one.

Frequently, you find out that a rule applied to an HTML page is not working. This situation might be so because multiple rules have been applied to the same element without knowing; this is where the cascading rules come into play. This article explains the method used to resolve conflicts in rules and how exactly a browser determines what style to apply to a specific element.

The actual logic of CSS code is more complex and is based on a classification of rules. We will be discussing two of these rules:

• The Cascading rule
• The Specificity rule

Cascading Rule

The cascade denotes that the cascade layer, the CSS rule order, and the origin/weight are important.

The CSS rule order simply states that when two rules from the same cascade layer both have equal specificity, the later rule will always override the earlier one.
For example, if we have two exact rules that apply to the same <div> element. The <div> element ends up taking the last rule (color: blue). Although both rules are the same, have the same specificity, and originate from the same selector, the last rule in the source order is chosen.

`div{
  color: brown;
}
div{
  color: blue;
}
`

Specificity Rule

Specificity is the process that determines which property value is applied to an element by the browser when several style blocks have various selectors that configure the same property with different values and target the same element.

When dealing with specificity, there are key things to note:
The class selector is more specific and weightier. The class selector, the attribute selector, and the pseudo-classes selector all have the same weight.
The element selector and the pseudo-element selector have the same specificity and are less specific and weightier than the class selector.
The ID selector is weightier than both the class selector and the element selector.

For example, the <div> element with a class name of "main-div" is styled below. The <div> element will take the style of the class selector over the element selector because the class selector is more specific.

div{
  color: brown;
}

.main-div{
  color: blue ;
}

Three different values identified as IDENTIFIERS, CLASS, and ELEMENT are used to quantify the specificity of a selector:

Identifiers: The Identifiers, popularly known as IDs, take the specificity of 100 points.

Classes: Any class selector, attribute selector, or pseudo-class that is a part of the overall selector takes a specificity of 10 points.

Elements: For any element selector or pseudo-element that is a part of the overall selector, it takes the specificity of 1 point.

CSS styles applied directly to the HTML elements have 1000 points, while the !important statement gives a specificity of 10,000 points.

Therefore, the rule is that the selector with the highest points takes the styling. In the case of having the same number of points for the same selectors, the one with the weightier elements takes the lead. In this regard: ID-CLASS-ELEMENT.
For example;

#id div ul li a {
  color: yellow; Will give us 5 points: 1-0-4
}


#id div ul .nav a {
  color: white; Will give us 5 points: 1-1-3
}

This code is targeting the same elements but with different selectors. The second one wins and makes the text color white because it has a class selector which is weightier than the four/infinity element selectors in the first code. The first code has no class selector.