? CSS Specificity

? Quick Overview

When multiple CSS rules match the same element, the browser decides which one to apply based on specificity. Specificity is like a score that depends on the type of selector you use (inline, ID, class, element, etc.). The rule with the higher specificity wins.

Understanding specificity helps you predict which styles will apply and avoid confusion when styles “don’t work” as expected.

? Key Concepts

Specificity is a way for browsers to decide which CSS rule is more important.
Different selector types (inline, ID, class, element) have different priorities.
If two rules have the same specificity, the one written later in the CSS wins.
Inline styles and !important can override normal specificity, but should be used carefully.

? Specificity Priority Table

Priority	Example	Description
Inline style	`<h1 style="color: pink;">`	Highest priority, directly applied with the `style` attribute
ID selectors	`#navbar`	Second highest priority, based on the unique `id` of an element
Classes & pseudo-classes	`.test`, `:hover`	Target elements using reusable class names or states
Attributes	`[type="text"]`	Match elements by attribute values
Elements & pseudo-elements	`h1`, `::before`, `::after`	Lowest priority, target HTML tags and their pseudo-elements

? Syntax & Theory

Browsers assign a “weight” to selectors. A simplified priority order is:

Inline styles (inside the HTML element)
ID selectors (#id)
Class, attribute, and pseudo-class selectors (.class, [attr], :hover)
Element and pseudo-element selectors (p, h1, ::before)

When selectors conflict, the rule with higher specificity wins. If specificities are equal, the rule that appears later in the CSS file wins due to the CSS Cascade.

? Code Example: Element vs Class vs ID

? View CSS Code

/* Same element targeted by element, class, and ID selectors */
div {
background-color: lightgray;
color: black;
}

.box {
background-color: blue;
color: white;
}

#special {
background-color: green;
color: white;
}

? View HTML Code

<!-- Watch which background color finally applies -->
<div class="box">Class selector (.box)</div>
<div id="special" class="box">ID selector (#special) - highest specificity</div>

? Live Output / Explanation

Result (Conceptual)

In the second <div>:

div selector applies a base style.
.box selector overrides it with a blue background.
#special selector overrides both with a green background.

Because ID selectors have higher specificity than class or element selectors, the final background color becomes green.

⚔️ Specificity Conflicts

When selectors conflict, the one with the higher priority wins. For example:

#id beats .class
.class beats element
Inline styles beat all normal selectors

? Using the `!important` Rule

The !important declaration can override all normal specificity rules, including inline styles. However, it should be used sparingly because it makes your CSS harder to maintain.

? View Code Example

/* Forces this style to win, even over more specific selectors */
.box {
background-color: red !important;
}

Explanation

If a .box element is targeted by other selectors (even IDs or inline styles), the background-color: red !important; rule will usually win.

Overusing !important can lead to specificity “wars” where you keep adding more !important just to override previous rules. It’s better to structure your CSS carefully instead.

? Tips & Best Practices

Keep specificity low and consistent to make styles predictable.
Prefer class selectors for most styling instead of IDs.
Avoid mixing too many selector types in a single rule.
Use !important only when absolutely necessary (e.g., utility helper classes).
Remember: if something “doesn’t work”, check specificity and source order.

? Try It Yourself

Create a paragraph targeted by both a tag selector (p) and a class selector (.highlight). See which style wins.
Override a class selector using an ID selector on the same element. Confirm that the ID styles win.
Add an inline style to an element and compare it with styles from your external CSS file.
Experiment with !important on a class and see how it affects other selectors.

CSS Specificity