Cascading and Specificity in CSS

In CSS, cascading and specificity are two fundamental concepts that determine how styles are applied to HTML elements. Understanding these principles allows developers to control which styles take precedence and ensure a consistent look across a website.

What is the Cascading in CSS?

The term "cascading" in CSS refers to the hierarchical order in which styles are applied to HTML elements. CSS follows specific rules to resolve conflicts when multiple styles apply to the same element. This order of importance is based on a combination of source order, specificity, and inheritance, and it defines which styles are applied.

1. Source Order

When two rules target the same element and have equal specificity, the rule that appears later in the CSS file or stylesheet takes precedence. This is known as source order.

Example:

In this example, the paragraph text will appear green, as the second rule overrides the first due to its position in the code.

2. Importance

CSS also has a mechanism to prioritize styles using the !important keyword. When added to a property, !important makes that rule more important than others, regardless of specificity or source order.

Example:

In this case, the paragraph text will appear blue because !important gives it the highest priority.

What is Specificity in CSS?

Specificity is a measure of how specific a CSS selector is. CSS calculates specificity to determine which styles apply when multiple selectors target the same element. Specificity is determined by assigning a score based on the types of selectors used.

Specificity Rules

The specificity hierarchy can be understood through the following rules, listed from highest to lowest specificity:

• Inline styles (styles defined directly within the HTML element) have the highest specificity.
• ID selectors (#id) are more specific than class selectors or element selectors.
• Class selectors (.class) and attribute selectors ([attribute]) are more specific than element selectors.
• Element selectors (e.g., p, h1, div) have the lowest specificity.

Example of specificity calculations:

In this example, the #header rule has the highest specificity, so any element with the ID "header" will appear red, regardless of other class or element styles.

How Specificity is Calculated

CSS calculates specificity by assigning a point value to each type of selector within a rule:

• Inline Styles: 1000 points
• ID Selectors: 100 points
• Class, Attribute, and Pseudo-class Selectors: 10 points
• Element and Pseudo-element Selectors: 1 point

When multiple selectors target the same element, CSS compares specificity scores to determine which style takes precedence.

Example of Cascading and Specificity

Consider the following CSS and HTML:

HTML:

In this example, the paragraph will appear red because the ID selector #main-paragraph has the highest specificity (100 points), followed by the class .highlight (10 points), and then the element selector p (1 point).

Conclusion

Cascading and specificity are essential CSS concepts for controlling which styles are applied to elements. Cascading resolves conflicts through source order and the !important keyword, while specificity assigns weight to selectors. Mastering these concepts allows developers to create clean, organized, and predictable stylesheets for web projects.