Skip to main content

CHAT GPT
Solution of  aka  Stronger ONEs
IF ..
ACCIDENTALLY DEFINING THE SAME CLASS TWICE

Accidentally Defining the Same Class Twice

If you accidentally define the same class twice in internal CSS, like this:


<style>

.blogger {

  color: blue;

}

.blogger {

  color: red;

}

</style>

The rule that appears last wins — because of the CSS cascade order.

So in this case → the text will be red.

How to Make One .blogger More Powerful

1️⃣ Use an ID (Very Strong)


#main .blogger {

  color: red;

}

Specificity:


#main .blogger → 0,1,1,0

IDs are stronger than classes, so this overrides:


.blogger → 0,0,1,0

2️⃣ Duplicate the Class (Hacky but Works)


.blogger.blogger {

  color: red;

}

This increases specificity.



CSS Specificity Difference


0,0,1,0

vs

0,0,2,0

What Do These Numbers Mean?

Specificity format:


(A, B, C, D)
Position Represents Example
A Inline style style=""
B ID selectors #main
C Class / attribute / pseudo-class     .blogger, [type=text], :hover
D Element selectors div, p

0,0,1,0

  • 0 inline styles
  • 0 IDs
  • 1 class
  • 0 elements

.blogger { color: blue; }

Specificity = 0,0,1,0

0,0,2,0

  • 0 inline styles
  • 0 IDs
  • 2 classes
  • 0 elements

.container .blogger { color: red; }

/* OR */

.blogger.active { color: red; }

Specificity = 0,0,2,0

Why 0,0,2,0 Wins

CSS compares left to right:


0,0,2,0

0,0,1,0

      ↑

At the class level: 2 > 1

So this wins:


.blogger { color: blue; }           

.container .blogger { color: red; }

Final color → red

Important Note

Specificity is compared column by column from left to right.


0,1,0,0   (one ID)

0,0,999,999

The first one wins because the ID column is higher.

CSS Specificity Guide

CSS Specificity Difference

0,0,1,0
vs
0,0,2,0

What Do These Numbers Mean?

Specificity format:

(A, B, C, D)
Position Represents Example
A Inline style style=""
B ID selectors #main
C Class / attribute / pseudo-class .blogger, [type=text], :hover
D Element selectors div, p

0,0,1,0

  • 0 inline styles
  • 0 IDs
  • 1 class
  • 0 elements
.blogger { color: blue; }

Specificity = 0,0,1,0

0,0,2,0

  • 0 inline styles
  • 0 IDs
  • 2 classes
  • 0 elements
.container .blogger { color: red; }
/* OR */
.blogger.active { color: red; }

Specificity = 0,0,2,0

Why 0,0,2,0 Wins

CSS compares left to right:

0, 0, 2, 0
0, 0, 1, 0
      ↑

At the class level: 2 > 1. Final color → red

Important Note

Specificity is compared column by column from left to right. Even a million classes cannot beat a single ID.

0,1,0,0   (One ID wins!)
0,0,99,99 (Many classes/elements lose)

3️⃣ Use !important (Last Resort)


.blogger {

  color: red !important;

}

This overrides almost everything except another !important with higher specificity.

Avoid overusing it — it makes CSS harder to maintain.

What Really Controls Priority?

  1. !important
  2. Inline style (style="")
  3. ID selectors
  4. Class selectors
  5. Element selectors
  6. Order (last wins if equal)

Best Practice Recommendation

  • Prefer increasing specificity instead of repeating rules
  • Avoid !important unless absolutely necessary
  • Keep CSS structured and predictable

Comments

Post a Comment