CSS Specificity Algorithm

What is CSS?

CSS stands for Cascading Style Sheets. But what does "Cascading" mean? It refers to how styles override one another.

By default, every browser has its own user agent stylesheet. This means that when you write an HTML structure, the browser applies default styling to the tags (like buttons, headings, etc.). However, this default styling can differ from one browser to another.

Example: Default Button Styling

When you write a button element in HTML:

<button>Default css for button in Edge</button>

Every browser gives it some default style (like padding, border, background).

If you want to override this styling, you write your own CSS:

button {
  background-color: blue;
  color: white;
}

This is how CSS "cascades" over default browser styles.

Selectors in CSS

Selectors are like identifying your "customers" before styling them. Imagine you are a makeup artist. To style someone, you must first know who they are.

There are four main types of selectors (though there are others like attribute, pseudo, group):

Universal Selector (*)
- Analogy: If you want to apply the same makeup to everyone (all families and all members), you use the universal selector.
- Example: Everyone gets basic foundation.

    * {
      foundation: applied;
    }

Type Selector (Tag Selector)
- Analogy: If you want to apply makeup to a specific family (e.g., "Smith family"), you use the type selector.
- Example: All members of the Smith family get the same hairstyle.

    p {
      hairstyle: curls;
    }

Class Selector (.classname)
- Analogy: If you want to apply makeup to specific members of a family, you use the class selector.
- Example: Only the teenagers in the Ram’s family get glitter makeup.

    .teenager {
      makeup: glitter;
    }

ID Selector (#idname)
- Analogy: If you want to apply makeup to just one person, you use the ID selector.
- Example: Swetha, the youngest child, gets a unique lipstick color.

    #swetha {
      lipstick: red;
    }

Inline Styles
- Analogy: Sometimes, someone insists on a personalized makeover, ignoring all group rules. You apply the makeup directly on the spot.
- Example: Swetha changes her mind and asks for green lipstick.

    <p style="lipstick: green;">Swetha's unique choice.</p>

What Happens When Multiple Selectors Target the Same Element with Different Properties?

Before diving into specificity, let’s first understand what happens when multiple selectors target the same element but modify different properties.

Analogy: Multiple Layers of Makeup

Imagine you're applying makeup. You apply foundation, then eyeshadow, then lipstick, etc. Each makeup layer affects a different part of the face. You acquire all of them, as each targets a different aspect (foundation for the face, eyeshadow for the eyes, lipstick for the lips).

If multiple selectors apply to the same element but affect different properties, the element will acquire all of those styles.

Example: Multiple Styles Applied

/* Type Selector */
p {
  color: blue;
}

/* Class Selector */
.highlight {
  background-color: yellow; 
}

/* ID Selector */
#main {
  font-weight: bold; 
}

<p id="main" class="highlight">Hello, World!</p>

In this example:

The text color will be blue (from the p type selector).
The background color will be yellow (from the .highlight class selector).
The font weight will be bold (from the #main ID selector).

The element acquires all styles because each one targets a different property.

But what happens if multiple selectors target the same property? This is where the conflict arises.

Conflict Within the Same Selector: Multiple Values for the Same Property

Analogy: Multiple Makeup Layers on the Same Part of the Face

Imagine you apply red lipstick first, but then you change your mind and apply green lipstick on top. The green lipstick will be the final one you see, because it was applied last.

In CSS, if you apply multiple styles for the same property (e.g., color: red and color: green), the last declared value will take precedence.

Example:

p {
  color: red;  /* First style */
  color: green;  /* Last declared style */
}

Result: The paragraph will be green because it's the last declared value for the color property.

Conflict Between Different Selectors

Now, what happens if different selectors target the same element and modify the same property? This is where specificity comes into play.

Example with conflicting styles from different selectors:

/* Universal Selector */
* {
  color: blue;
}

/* Type Selector */
p {
  color: green;
}

/* Class Selector */
.highlight {
  color: red;
}

/* ID Selector */
#main {
  color: yellow;
}

/* Inline Style */
<p id="main" class="highlight" style="color: orange;">Highest priority Colour</p>

Specificity Algorithm: Deciding the Final Look

When multiple selectors conflict, specificity determines which style applies. Specificity is a score based on the type of selector used. Here’s how the priority works:

Inline > ID >Class > Type > Universal

Therefore in the above code the output will be “Highest priority Color” in orange color.
Let’s see some more scenario’s.

Scenarios: Who Wins?

1. Only the Universal Selector:

* {
  color: blue;
}

Result: All elements will be blue because the universal selector applies to everything.

2. Universal and Type Selector:

* {
  color: blue;
}
p {
  color: green;
}

Result: All elements will be blue, except paragraphs () will be green because the type selector has higher specificity.

3. Type and Class Selector:

p {
  color: blue;
}
.highlight {
  color: green;
}

Result: Regular paragraphs will be blue, but paragraphs with the .highlight class will be green because the class selector has higher specificity than the type selector.

4. Class and ID Selector:

.highlight {
  color: blue;
}
#main {
  color: green;
}

Result: The element with the ID main will be green, even if it also has the .highlight class, because ID selectors have higher specificity than class selectors.

5. Inline Style Overrides Everything:

<p id="main" class="highlight" style="color: red;">Hello</p>

Result: The text will be red because inline styles have the highest specificity, and they override all other styles.

Conclusion

Conflict within the same selector: The last declared value for the property will always be applied.
Conflict between different selectors: The selector with higher priority wins.

Thankyou!!