Recognizing Selectors, Specificity, and CSS Cascade

Introduction to CSS Cascade

A webpage's layout is determined by a language called Cascading Style Sheets (CSS), which is made up of a collection of rules. To some degree, everyone knows that the page indicates which rule is more important—that is, which rule takes precedence over the previous one.

It is common to discover that a rule that has been applied to an HTML page is not functioning. It's possible that several rules were unintentionally applied to the same element in this case, which is when the cascading rules come into play. The technique for resolving rule conflicts and the precise way a browser chooses which style to apply to a given element are both covered in this article.

The real logic of CSS code is built on a hierarchy of rules and is more intricate. Two of these rules are going to be covered:

• Cascading rule
• Specificity rule

Cascading Rule

The cascade indicates the importance of the origin/weight, the CSS rule order, and the cascade layer.

The CSS rule order only specifies that the later rule will always take precedence over the older one when two rules from the same cascade layer have equal specificity.
Consider the situation where two identical rules are applied to the same
element. The last rule (color: blue) is ultimately taken by the
element. The last rule in the source order is selected even though both rules are identical, have the same specificity, and come from the same selector.

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

Specificity Rule

When multiple style blocks have different selectors that configure the same property with different values and target the same element, specificity is the mechanism that decides which property value is applied to an element by the browser.

When addressing specificity, it's important to remember the following:
The class selector has greater weight and is more precise. The weight of the class selector, attribute selector, and pseudo-classes selector is the same.
Less specific and heavier than the class selector, the element selector and pseudo-element selector have the same specificity.
Compared to the class selector and element selector, the ID selector has more weight.

As an illustration, the element styled below has the class name "main-div". Because the class selector is more particular than the element selector, the
element will use it's style.

div{
  color: brown;
}

.main-div{
  color: blue ;
} 

A selector's specificity is measured using three distinct values, denoted as IDENTIFIERS, CLASS, and ELEMENT:

Identifiers: Also referred to as IDs, the Identifiers use a 100-point specificity.

Classes: A specificity of 10 points is awarded to any class selector, attribute selector, or pseudo-class that is a component of the overall selector.

Elements: The specificity of 1 point is required for any element selector or pseudo-element that is a component of the overall selector.

A specificity of 10,000 points is provided by the!important statement, whereas CSS styles applied directly to HTML elements have 1000 points.

As a result, the selector who receives the most points wins the styling. When two selectors with the same number of points are tied, the selector with the heavier elements wins. Regarding this: ID-CLASS-ELEMENT.
As an illustration;

#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
}

The same elements are the objective of this code, but different selectors are used. Because the second code has a class selector that is heavier than the four/infinity element selectors in the first code, it succeeds and turns the text white. There is no class selector in the first code.