CSS Specificity Explained

Introduction

CSS specificity is one of the main reasons one CSS rule can override another.

For example:

1p {2  color: black;3}4 5.intro {6  color: navy;7}

HTML:

1<p class=”intro”>Welcome to the page.</p>

Both rules apply to the paragraph.

The paragraph is a <p> element, so the p selector applies.

The paragraph also has class="intro", so the .intro selector applies.

The browser must decide which colour to use.

In this case, the paragraph becomes navy because .intro is more specific than p.

Specificity is the system CSS uses to compare selectors when more than one rule targets the same element and property.

Understanding specificity helps explain why some selectors override others and why some CSS rules appear crossed out in browser developer tools.

What Is CSS Specificity?

Specificity is the weight or strength of a CSS selector.

When two or more declarations apply to the same element and the same property, the browser compares their specificity.

Example:

1p {2  color: black;3}4 5.highlight {6  color: blue;7}

HTML:

1<p class=”highlight”>Important paragraph.</p>

Both rules set color.

The .highlight selector is more specific than the p selector.

So the paragraph becomes blue.

The more specific selector wins unless another part of the cascade changes the result.

Why Specificity Matters

Specificity matters because CSS often has several rules affecting the same element.

For example:

1body {2  color: #222222;3}4 5p {6  color: #333333;7}8 9.intro {10  color: navy;11}

HTML:

1<p class=”intro”>This is the introduction.</p>

The paragraph may receive colour information from several places.

The body sets a general inherited colour.

The p rule sets a paragraph colour.

The .intro rule sets a class-specific colour.

The browser uses the cascade and specificity to decide the final value.

In this case, .intro is the most specific direct selector, so the text becomes navy.

Specificity Works Per Property

Specificity is compared per CSS property.

Example:

1p {2  color: black;3  font-size: 18px;4}5 6.intro {7  color: navy;8}

HTML:

1<p class=”intro”>Welcome.</p>

The paragraph gets:

1color from .intro2font-size from p

The .intro selector overrides only the color property because that is the property both rules define.

The p rule still provides font-size because .intro does not set a competing font size.

Specificity does not make an entire rule disappear.

It decides individual property conflicts.

A Simple Specificity Order

A simplified order from weaker to stronger is:

1type selector2class selector3ID selector4inline style

Examples:

1p {2  color: black;3}

1.intro {2  color: navy;3}

1#main-intro {2  color: green;3}

1<p style=”color: red;”>

In general:

1class selectors override type selectors2ID selectors override class selectors3inline styles override normal stylesheet rules

This simplified model explains many common CSS conflicts.

Type Selector Specificity

A type selector targets an HTML element by tag name.

Examples:

1p {2  color: black;3}

1h1 {2  font-size: 2rem;3}

1button {2  padding: 10px 16px;3}

Type selectors have low specificity.

They are useful for broad base styles.

For example:

1body {2  font-family: Arial, sans-serif;3}4 5p {6  line-height: 1.6;7}

Because type selectors are low specificity, they are usually easy to override later with classes.

Class Selector Specificity

A class selector targets elements with a specific class.

Example:

1.card {2  padding: 24px;3}

HTML:

1<article class=”card”>2  <h2>CSS Selectors</h2>3</article>

Class selectors are more specific than type selectors.

Example:

1p {2  color: black;3}4 5.intro {6  color: navy;7}

HTML:

1<p class=”intro”>Welcome.</p>

The paragraph becomes navy.

The .intro selector is stronger than the p selector.

Classes are usually the most useful selectors for reusable styling.

ID Selector Specificity

An ID selector targets an element with a specific id.

Example:

1#main-title {2  color: green;3}

HTML:

1<h1 id=”main-title”>Welcome</h1>

ID selectors are more specific than class selectors.

Example:

1.page-title {2  color: navy;3}4 5#main-title {6  color: green;7}

HTML:

1<h1 id=”main-title” class=”page-title”>Welcome</h1>

The heading becomes green because #main-title is more specific than .page-title.

IDs are powerful.

Use them carefully in CSS because they can make styles harder to override.

Inline Style Specificity

Inline styles are written directly in the HTML with the style attribute.

Example:

1<p style=”color: red;”>This paragraph is red.</p>

Inline styles are usually stronger than normal stylesheet rules.

Example:

1<p class=”intro” style=”color: red;”>Welcome.</p>

CSS:

1.intro {2  color: navy;3}

The paragraph becomes red.

The inline style wins over the class selector.

Inline styles can be useful in rare cases, but they usually make CSS harder to maintain.

For normal website styling, use stylesheets and classes instead.

Specificity as a Score

Specificity is often explained as a scoring system.

A common simplified format is:

1IDs – classes/attributes/pseudo-classes – types/pseudo-elements

For example:

1p

has:

10 IDs20 classes31 type

So it can be thought of as:

10-0-1

This selector:

1.intro

has:

10 IDs21 class30 types

So it is:

10-1-0

This selector:

1#main-intro

has:

11 ID20 classes30 types

So it is:

11-0-0

A higher value in the leftmost column wins.

Specificity Score Examples

This selector:

1p

Specificity:

10-0-1

This selector:

1.card

Specificity:

10-1-0

This selector:

1.card p

Specificity:

10-1-1

This selector:

1#main-content p

Specificity:

11-0-1

The ID selector column is stronger than the class column.

That means #main-content p is much harder to override than .card p.

Comparing Specificity

Example:

1p {2  color: black;3}4 5.card p {6  color: navy;7}

HTML:

1<article class=”card”>2  <p>This paragraph is inside a card.</p>3</article>

The paragraph becomes navy.

Why?

The selector p has specificity:

10-0-1

The selector .card p has specificity:

10-1-1

Because .card p includes a class selector, it is more specific.

Specificity Beats Source Order When Selectors Differ

Source order means later rules can win when specificity is equal.

But a more specific selector can beat a later less-specific selector.

Example:

1.intro {2  color: navy;3}4 5p {6  color: black;7}

HTML:

1<p class=”intro”>Welcome.</p>

The paragraph becomes navy.

Even though the p rule comes later, .intro is more specific.

Source order does not automatically beat specificity.

The later rule wins only when the competing declarations have equal specificity or when other cascade factors allow it.

When Source Order Wins

If specificity is equal, the later rule wins.

Example:

1.message {2  color: green;3}4 5.message {6  color: blue;7}

HTML:

1<p class=”message”>Your settings were saved.</p>

Both rules use the same selector.

They have equal specificity.

The second rule comes later, so the message becomes blue.

Specificity decides first.

If specificity is tied, order decides.

Specificity with Multiple Classes

Multiple classes in a selector increase specificity.

Example:

1.button {2  background-color: gray;3}4 5.button.primary {6  background-color: navy;7}

HTML:

1<button class=”button primary”>Save</button>

The button becomes navy.

The selector .button.primary has two class selectors.

It is more specific than .button.

This means .button.primary can override .button even if .button appears later in some cases.

Specificity with Type and Class Selectors

A class selector combined with a type selector is more specific than the class alone.

Example:

1.note {2  color: navy;3}4 5p.note {6  color: green;7}

HTML:

1<p class=”note”>This is a note.</p>

The paragraph becomes green.

The selector p.note contains:

1one type selector2one class selector

It is more specific than .note.

However, adding type selectors to classes is not always necessary.

Use them only when you need that extra targeting.

Specificity with Descendant Selectors

Descendant selectors add up the specificity of their parts.

Example:

1.card p {2  color: navy;3}

This selector includes:

1.card = one class2p = one type

So it is stronger than:

1p {2  color: black;3}

This is useful when styling paragraphs only inside cards.

However, long descendant selectors can become too specific and fragile.

Example:

1body main .container article.card p.text {2  color: navy;3}

This may be harder to override and maintain.

Attribute Selectors and Specificity

Attribute selectors count like class selectors.

Example:

1input[type=”email”] {2  border-color: blue;3}

This is more specific than:

1input {2  border-color: gray;3}

HTML:

1<input type=”email”>

The email input gets a blue border.

The selector input[type="email"] includes:

1one type selector2one attribute selector

Attribute selectors are useful and reasonably specific.

They are not as strong as ID selectors.

Pseudo-Classes and Specificity

Pseudo-classes count like class selectors.

Examples:

1a:hover {2  text-decoration: underline;3}

1li:first-child {2  font-weight: bold;3}

1input:checked {2  outline: 2px solid green;3}

Each pseudo-class contributes specificity like a class.

For example, a:hover is more specific than a.

That is why hover styles can override normal link styles when the element is hovered.

Pseudo-Elements and Specificity

Pseudo-elements count like type selectors.

Examples:

1p::first-line {2  font-weight: bold;3}

1.note::before {2  content: “Note: “;3}

Pseudo-elements are generally low specificity.

They target parts of elements rather than element states.

They are usually not a major source of specificity problems, but they still contribute to the selector’s specificity.

Universal Selector Specificity

The universal selector has no specificity.

Example:

1* {2  box-sizing: border-box;3}

The * selector matches every element, but it does not add specificity.

That makes it useful for broad base rules.

For example:

1*,2*::before,3*::after {4  box-sizing: border-box;5}

This creates a base rule that is easy to override if needed.

Specificity with :is()

The :is() selector function takes the specificity of the most specific selector inside it.

Example:

1:is(h1, .title, #main-title) {2  color: navy;3}

The most specific selector inside :is() is:

1#main-title

This can make the whole rule more specific than expected.

Be careful when mixing type, class, and ID selectors inside :is().

If you want low specificity grouping, :where() may be better.

Specificity with :where()

The :where() selector function always has zero specificity.

Example:

1:where(h1, h2, p) {2  margin-top: 0;3}

This rule matches headings and paragraphs, but the :where() part adds no specificity.

That makes it useful for base styles and resets.

For example:

1:where(h1, h2, h3, p, ul, ol) {2  margin-top: 0;3}

Later class selectors can easily override these low-specificity defaults.

Specificity with :not()

The :not() selector function takes the specificity of the selector inside it.

Example:

1.card:not(.featured) {2  border: 1px solid #dddddd;3}

This includes:

1.card2.featured inside :not()

Both contribute to specificity.

Be careful with selectors such as:

1.card:not(#featured-card) {2  border: 1px solid #dddddd;3}

The ID inside :not() makes the selector more specific.

That may make it harder to override later.

Specificity with :has()

The :has() selector function also takes specificity from its argument.

Example:

1.card:has(img) {2  border-top: 4px solid navy;3}

This includes the .card class and the img type selector inside :has().

Another example:

1.card:has(.featured-image) {2  border-top: 4px solid navy;3}

The class inside :has() contributes to specificity.

:has() is powerful, but it can make selectors more complex.

Use it when it improves clarity.

Inline Styles and Specificity

Inline styles are stronger than normal stylesheet selectors.

Example:

1<p class=”intro” style=”color: red;”>Welcome.</p>

CSS:

1.intro {2  color: navy;3}

The paragraph becomes red.

The inline style wins.

To override inline styles from a stylesheet, authors sometimes use !important.

However, this should be avoided where possible.

If you control the HTML, removing the inline style is usually cleaner.

!important and Specificity

The !important flag changes normal cascade behaviour.

Example:

1p {2  color: red !important;3}4 5.intro {6  color: navy;7}

HTML:

1<p class=”intro”>Welcome.</p>

The paragraph may become red because the p declaration is marked !important.

Even though .intro is more specific, the important declaration has higher priority.

Use !important sparingly.

It can make CSS difficult to override and debug.

Competing !important Rules

If two declarations are both marked !important, specificity matters again.

Example:

1p {2  color: red !important;3}4 5.intro {6  color: navy !important;7}

HTML:

1<p class=”intro”>Welcome.</p>

Both declarations are important.

The .intro selector is more specific than p.

So the paragraph becomes navy.

If specificity is tied between two important declarations, source order can decide.

Why High Specificity Causes Problems

High-specificity selectors can make CSS hard to maintain.

Example:

1body main .content article.card p.description {2  color: navy;3}

This selector is very specific.

To override it, you may need an even more specific selector.

That can lead to a specificity battle.

Example:

1body main .content article.card.featured p.description {2  color: green;3}

This makes the stylesheet increasingly complex.

It is usually better to use clear class selectors.

Avoiding Specificity Battles

A specificity battle happens when you keep making selectors stronger to override earlier selectors.

Less ideal:

1.card p {2  color: navy;3}4 5main .card p {6  color: green;7}8 9body main .card p {10  color: red;11}

Better:

1.card-text {2  color: navy;3}4 5.card-text-featured {6  color: green;7}

HTML:

1<p class=”card-text card-text-featured”>Featured card text.</p>

Clear classes reduce the need for increasingly specific selectors.

Use Classes for Predictable Specificity

Classes are usually the best tool for predictable styling.

Example:

1<button class=”button button-primary”>Save</button>2<button class=”button button-secondary”>Cancel</button>

CSS:

1.button {2  padding: 10px 16px;3}4 5.button-primary {6  background-color: navy;7  color: white;8}9 10.button-secondary {11  background-color: white;12  color: navy;13}

This creates predictable, reusable styles.

The base class gives shared styling.

Modifier classes provide variations.

This is easier to maintain than relying on long descendant selectors or IDs.

Keep Specificity Low Where Possible

Low-specificity CSS is easier to override.

For example:

1.card {2  padding: 24px;3}

is easier to work with than:

1main .content section.article-list article.card {2  padding: 24px;3}

The first selector clearly styles cards.

The second selector depends on a very specific HTML structure.

If the structure changes, the selector may break.

If another style needs to override it, the selector may be unnecessarily difficult to beat.

Use Source Order Intentionally

When selectors have equal specificity, source order decides.

This can be useful.

Example:

1.button {2  background-color: gray;3}4 5.button-primary {6  background-color: navy;7}

HTML:

1<button class=”button button-primary”>Save</button>

Both selectors are class selectors.

They have equal specificity.

Because .button-primary comes later, it overrides the background colour.

This is a common and clean pattern:

1base styles first2variation styles later

A Complete Example

HTML:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>CSS Specificity Example</title>6  <link rel=”stylesheet” href=”styles.css”>7</head>8<body>9 10  <main class=”container”>11    <h1 id=”page-title” class=”title”>CSS Specificity</h1>12 13    <p class=”intro”>14      Specificity explains why some selectors override others.15    </p>16 17    <article class=”card featured-card”>18      <h2 class=”card-title”>Featured Lesson</h2>19      <p class=”card-text”>20        More specific selectors can override less specific selectors.21      </p>22      <a class=”button button-primary” href=”lesson.html”>Read more</a>23    </article>24  </main>25 26</body>27</html>

CSS:

1/* Type selector: low specificity */2h1 {3  color: black;4}5 6/* Class selector: stronger than h1 */7.title {8  color: navy;9}10 11/* ID selector: stronger than .title */12#page-title {13  font-size: 2.5rem;14}15 16/* Base paragraph style */17p {18  color: #333333;19}20 21/* Class selector overrides p colour */22.intro {23  color: navy;24}25 26/* Component base */27.card {28  padding: 24px;29  border: 1px solid #dddddd;30}31 32/* Variation comes later */33.featured-card {34  border-color: navy;35}36 37/* Clear class for card text */38.card-text {39  line-height: 1.6;40}41 42/* Button base */43.button {44  padding: 10px 16px;45  background-color: gray;46  color: white;47}48 49/* Button variation */50.button-primary {51  background-color: navy;52}

This example shows type, class, ID, and source order working together.

How the Complete Example Works

This rule targets all <h1> elements:

1h1 {2  color: black;3}

This rule targets elements with class="title":

1.title {2  color: navy;3}

The title becomes navy because .title is more specific than h1.

This rule targets the unique element with id="page-title":

1#page-title {2  font-size: 2.5rem;3}

The ID selector applies the font size.

This rule targets all paragraphs:

1p {2  color: #333333;3}

This rule targets the intro paragraph:

1.intro {2  color: navy;3}

The intro paragraph becomes navy because .intro is more specific than p.

This rule gives all buttons a base background:

1.button {2  background-color: gray;3}

This later rule changes primary buttons:

1.button-primary {2  background-color: navy;3}

Because both selectors have equal specificity and .button-primary comes later, the primary button becomes navy.

Debugging Specificity Problems

Browser developer tools are the best way to debug specificity.

Inspect the element and check the Styles panel.

Look for:

1which rules apply2which declarations are crossed out3which selector is more specific4which rule appears later5whether an inline style is present6whether !important is being used

A crossed-out declaration usually means the browser read the rule, but another rule won.

For example:

1p {2  color: black;3}

may be crossed out because:

1.intro {2  color: navy;3}

is more specific.

Developer tools show this directly.

Common Mistake: Thinking the Last Rule Always Wins

The last rule does not always win.

Example:

1.intro {2  color: navy;3}4 5p {6  color: black;7}

HTML:

1<p class=”intro”>Welcome.</p>

The paragraph becomes navy.

Even though the p rule comes later, .intro is more specific.

The later rule wins only when specificity is equal or when higher cascade rules allow it.

Common Mistake: Using IDs for Everyday Styling

This works:

1#site-nav {2  background-color: navy;3}

But it can be harder to override than a class:

1.site-nav {2  background-color: navy;3}

Use IDs when uniqueness is important, such as page anchors or JavaScript hooks.

Use classes for most styling.

Classes are easier to reuse and easier to override.

Common Mistake: Making Selectors Too Long

Less maintainable:

1body main .container section.article-list article.card p.card-text {2  color: navy;3}

Better:

1.card-text {2  color: navy;3}

Long selectors can create high specificity and depend too much on exact HTML structure.

Short, meaningful class selectors are usually easier to maintain.

Common Mistake: Adding !important Instead of Fixing Specificity

Less ideal:

1.card-text {2  color: navy !important;3}

Better:

1.card-text-featured {2  color: navy;3}

or place the override later:

1.card-text {2  color: #333333;3}4 5.card-text-featured {6  color: navy;7}

!important can be useful in limited situations, but it should not be the default solution.

Common Mistake: Forgetting That Attribute Selectors Count Like Classes

This selector:

1input[type=”email”] {2  border-color: blue;3}

is more specific than:

1input {2  border-color: gray;3}

The attribute selector adds specificity.

If your general input style is being overridden, check whether an attribute selector is involved.

Common Mistake: Confusing Inheritance with Specificity

Inheritance is not the same as specificity.

Example:

1body {2  color: black;3}4 5p {6  color: navy;7}

The paragraph becomes navy.

The paragraph may inherit black from body, but the p rule directly applies navy.

Directly applied styles beat inherited styles.

Specificity compares selectors that directly apply to the element.

Inheritance provides values when no direct value is set.

Common Mistake: Over-Specifying Component Styles

Less flexible:

1main .card .card-title {2  color: navy;3}

Often better:

1.card-title {2  color: navy;3}

or:

1.card .card-title {2  color: navy;3}

Use only as much specificity as the component needs.

Over-specific selectors make future changes harder.

Best Practices

Use type selectors for broad base styles.

Use classes for reusable component styles.

Use IDs sparingly in CSS.

Avoid inline styles for normal styling.

Avoid !important unless there is a clear reason.

Keep selectors as short as practical.

Avoid deep descendant selector chains.

Use modifier classes for variations.

Place base styles before variation styles.

Use source order intentionally when specificity is equal.

Use :where() for low-specificity base rules when appropriate.

Use browser developer tools to inspect which selector is winning.

Summary

CSS specificity explains why some selectors override others.

A type selector has low specificity:

1p {2  color: black;3}

A class selector is more specific:

1.intro {2  color: navy;3}

An ID selector is more specific again:

1#main-intro {2  color: green;3}

Inline styles are usually stronger than normal stylesheet selectors:

1<p style=”color: red;”>

The simplified order is:

1type selector < class selector < ID selector < inline style

If selectors have equal specificity, the later rule usually wins.

If one selector is more specific, it can override a later but weaker selector.

The main idea is simple:

1Specificity is the weight of a selector.2The heavier selector usually wins.

Once you understand specificity, it becomes much easier to predict, organise, and debug CSS.