CSS Specificity
Understand the mathematical weight hierarchy the browser uses to execute styling commands.
When three competing CSS laws target an identical HTML tag, chaos erupts. The browser engine determines the winner by evaluating a scoring mechanism known as Specificity.
The Hierarchy of Power
If conflicting constraints target identical elements, this definitive weight tier (lowest to highest) enforces order:
- Element tags (
p,h1): Weakest priority. - Classes & Pseudo-classes (
.menu-btn,:hover): Medium priority. - Unique Identifiers (
#login-panel): Massive priority. - Inline HTML styling (
style="color:red"): God-tier priority.
Calculating the Battle
Observe an intense clash where multiple targets collide against a solitary paragraph block.
Preview
The !important Hack
If you append !important at the climax of a CSS directive, it shatters the structural scoring math completely, usurping absolute dominance.
Note: Overusing this trick signifies heavily disorganized style frameworks.