Class overrule when two classes assigned to one div

Specificity: who's the boss?

In the kingdom of CSS, specificity is a system that determines who's the boss. It's like a battle of importance where each selector has a rank:

• Inline styles wear the crowns (1000 points)
• IDs flaunt their titles (100 points)
• Classes, attributes, and pseudo-classes bring up the cavalry (10 points)
• and the Elements and pseudo-elements are the foot soldiers (1 point).

The winner is decided by adding up these points. The higher the score, the stronger the rule. The rule with the most points gets the throne and wears the crown.

#uniqueId .myClass { color: green; /* the king decides it’s green day */ }   /* Specificity: 110 */
div.myClass { color: blue; /* civilians want a blue day */ }                  /* Specificity: 11 */
.myClass { color: yellow; /* foot soldiers vote for yellow day */ }           /* Specificity: 10 */


In this example, the color will be green, courtesy of the king with the highest specificity.

Juggling with styles: last laugh matters

Shuffling rank files of your CSS can be like a joker in a card game, altering the look and feel of your designs. The last rule in a stylesheet laughs last and loudest if the specificity is the same:

/* The below rule will apply if both classes have equal specificity */
.later-class { background-color: lime; /* Late lime wins the race */ }
.earlier-class { background-color: tomato; /* Early tomato gets squashed */ }


The !important rule is a trump card that can bypass the priority game but use it with caution. It's like an unexpected plot twist that overrules all styles, regardless of specificity or order.

More than just a face-off: solving the class conflict

Diagnosing style clashes often involves more than just choosing the most powerful selector. You might need to:

1. Calculate specificity: Recognize patterns and assess the weight of different selectors.
2. Understand the cascade: Learn how styles are stacked based on their source and degree of importance.
3. Marriage of styles: Harness the power of combining non-conflicting rules to enrich your design while effectively resolving disputes.

Visualization

🥶🥶🥶🥶       💔            🔥🔥🔥🔥
Class A   🆚  Class B  

In the battlefield of CSS, Class A and B are like duelling teams wrestling over the heart (💔) of style. The one with the higher specificy or later placement in the CSS file wins the tug-of-war:

.divA {
  /* Class A styles are chill */
}
.divB {
  /* Class B styles bring the heat; might win if stronger or later */
}


Where the 💔 ends up determines which class style takes precedence.

The art of managing multiple classes

Working with multiple classes can be a balancing act:

• Distinctive class names: Avoid overlapping styles by using unique class names.
• Try out class combinations: Experiment with various combinations to see the outcome.
• Leverage commenting: Use comments to note down the significance and expected dominance of each rule in your CSS.
• Embrace the cascade: Understand the order and sequence of how styles are applied - both from specificity and inheritance.

Remember, in the CSS regime, the one who laughs (appears) last, laughs best. So, the order of classes in your CSS file holds significance, not the HTML class order.