In CSS, cascading and specificity are key concepts that determine how styles are applied to HTML elements when there are multiple conflicting rules. Understanding both concepts helps you resolve conflicts between CSS rules and control which styles take precedence.

1. Cascading in CSS

The cascading in Cascading Style Sheets (CSS) refers to the way the browser decides which CSS rules to apply when multiple rules target the same element. CSS follows the "cascade" principle, meaning that styles are combined in a hierarchy and resolved in the following order:

Cascading Order:

1. Importance: Rules marked as !important take the highest precedence.

2. Specificity: More specific selectors take precedence over more general ones.( !important > inline CSS> id > class, pseudo-class > element, pseudo-element )

3. Source Order: When specificity is equal, the rule that appears later in the CSS (or HTML) will override earlier rules.

    h1{
      color: red;
    }
    h1{
      color:black
    }
    // the latest rule wil applied
   

   

2. Specificity in CSS

Specificity is a system used by browsers to determine which CSS rule should be applied to an element when there are multiple conflicting rules. Each selector has a specificity value based on the types of selectors used.

Specificity is calculated based on four components:

1. Inline Styles: Any style applied directly in the HTML using the style attribute (e.g., <h1 style="color: red;">) has the highest specificity.

   • Score: 1,0,0,0

2. ID Selectors: Any selector that uses an id (e.g., #header) has high specificity.

   • Score: 0,1,0,0

3. Class, Attribute, and Pseudo-class Selectors: These selectors, like .className, [type="text"], or :hover, contribute to the middle level of specificity.

   • Score: 0,0,1,0

4. Element and Pseudo-element Selectors: These include tag names like div, p, h1, or pseudo-elements like ::before and ::after. They have the lowest specificity.

   • Score: 0,0,0,1

Example: Calculating Specificity

For the rule #nav .menu a:hover, the specificity breakdown is as follows:

• #nav (ID selector) = 0,1,0,0

• .menu (class selector) = 0,0,1,0

• a (element selector) = 0,0,0,1

• :hover (pseudo-class) = 0,0,1,0

Total specificity: 0,1,2,1

Comparing Specificity:

• A rule like #nav has a higher specificity (0,1,0,0) than .menu a (0,0,1,1).

• If two selectors have the same specificity, the rule that appears later in the stylesheet will take precedence.

3. Source Order

When two selectors have the same specificity, source order is used to determine which rule takes precedence. The rule that is written later in the stylesheet or in the HTML (for inline styles) will override any previous conflicting rules.

h1{
  color: red;
}
h1{
  color:black
}
// black will be applied to h1

4. !important

The !important rule is used to make a CSS property override all other rules, regardless of specificity. However, it should be used sparingly because it can make debugging and maintaining your CSS more difficult.

h1{
  color: red;
}
h1{
  color:black
}

p {
  color: blue !important;
}

p {
  color: red;
}
// In this case, even though the second rule appears later, 
the paragraph will be blue because the color: blue rule is 
marked as !important.

Specificity Example:

<h1 id="header" class="title">Hello World</h1>

/* Rule 1: Element selector */
h1 {
  color: blue;
} /* Specificity: 0,0,0,1 */

/* Rule 2: Class selector */
.title {
  color: green;
} /* Specificity: 0,0,1,0 */

/* Rule 3: ID selector */
#header {
  color: red;
} /* Specificity: 0,1,0,0 */

• Rule 1 (h1) targets the h1 element, giving it a blue color.

• Rule 2 (.title) targets the class="title", which changes the color to green, overriding the first rule because the specificity is higher.

• Rule 3 (#header) targets the id="header", giving it the highest specificity and changing the color to red.

Result: The text will be red because the ID selector has the highest specificity.

Summary of Specificity and Cascade:

( !important → inline CSS → id → class, pseudo → class → element, pseudo-element )