Understanding CSS Specificity Basics

If you’ve ever written CSS and wondered, “Why isn’t my style working?”, you’ve already bumped into CSS specificity.

Specificity decides which CSS rule wins when more than one rule tries to style the same element. Once you understand it, you’ll spend far less time being confused and more time confidently styling your pages.

In this beginner-friendly guide, you’ll learn:

What CSS specificity is (in simple terms)
How different types of selectors affect specificity
How to predict which style will win
Practical examples you can copy, run, and tweak

Let’s start from the very beginning.

1. What is CSS Specificity?

When two or more CSS rules try to style the same element, the browser must decide which rule to apply.

Specificity is like a scoring system. The rule with the higher score wins.

You don’t need to memorize numbers right now. Just remember:

More specific selector = more important = it wins.

We’ll use simple patterns and examples so you can feel this “score” without doing math.

2. Meet the Main Types of Selectors

Here are the main selector types we’ll use, from less specific to more specific:

Type selectors – use the HTML tag name
- Example: p, h1, button
Class selectors – start with a dot .
- Example: .highlight, .btn-primary
ID selectors – start with a hash #
- Example: #main-title, #nav
Inline styles – written directly in the HTML style attribute
- Example: <p style="color: red;">

The basic rule:

Inline > ID > Class > Type

We’ll see this in action now.

3. Example 1: Type vs Class

Let’s start simple. Copy this into an index.html file and open it in your browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Specificity Example 1</title>
  <style>
    /* Type selector: styles all <p> elements */
    p {
      color: blue;      /* Make text blue */
    }

    /* Class selector: styles elements with class="highlight" */
    .highlight {
      color: red;       /* Make text red */
    }
  </style>
</head>
<body>
  <p>This paragraph is blue.</p>
  <p class="highlight">This paragraph is red.</p>
</body>
</html>

What you’ll see:

The first paragraph is blue.
The second paragraph is red, even though the p selector said color should be blue.

Why?

p is a type selector.
.highlight is a class selector.
Class selectors are more specific than type selectors.

So for the second paragraph, the browser has two color rules:

From p { color: blue; }
From .highlight { color: red; }

Because class is more specific than type, red wins.

Try it yourself

Change the .highlight color to green. Refresh the page. Notice it still wins over the p selector.

4. Example 2: Class vs ID

Now let’s add an ID selector and see what happens.

Update your HTML and CSS to this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Specificity Example 2</title>
  <style>
    p {
      color: blue;            /* Type selector */
    }

    .highlight {
      color: red;             /* Class selector */
    }

    #special-text {
      color: green;           /* ID selector */
    }
  </style>
</head>
<body>
  <p>This paragraph is blue.</p>
  <p class="highlight">This paragraph is red.</p>
  <p class="highlight" id="special-text">This paragraph is green.</p>
</body>
</html>

What you’ll see:

First paragraph: blue (from p)
Second paragraph: red (from .highlight)
Third paragraph: green (from #special-text)

The third paragraph matches three rules:

p { color: blue; }
.highlight { color: red; }
#special-text { color: green; }

Who wins?

Using our order:

Inline > ID > Class > Type

ID beats class
Class beats type

So the ID rule wins, and the text is green.

Try it yourself

Change the ID color to purple.
Refresh the page.
Confirm that the third paragraph is now purple, even though the class says red and the type says blue.

5. Example 3: When Selectors Combine

Sometimes a selector uses multiple types at once. For example:

p.highlight (type + class)
#special-text.highlight (ID + class)

The more “pieces” of specificity a selector has, the stronger it becomes.

Update your file again:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Specificity Example 3</title>
  <style>
    p {
      color: blue;                /* Type selector */
    }

    .highlight {
      color: red;                 /* Class selector */
    }

    p.highlight {
      color: orange;              /* Type + class (more specific than just .highlight) */
    }

    #special-text {
      color: green;               /* ID selector */
    }
  </style>
</head>
<body>
  <p>This paragraph is blue.</p>
  <p class="highlight">This paragraph is orange.</p>
  <p class="highlight" id="special-text">This paragraph is green.</p>
</body>
</html>

What you’ll see now:

First paragraph: blue
Second paragraph: orange (because p.highlight beats .highlight)
Third paragraph: green (ID still wins there)

For the second paragraph, the browser sees:

p → blue
.highlight → red
p.highlight → orange

Which wins?

p (type) is the weakest.
.highlight (class) is stronger.
p.highlight (class + type) is even more specific than just .highlight.

So, orange wins for the second paragraph.

Try it yourself

Comment out the p.highlight rule like this:

/* p.highlight {
  color: orange;
} */

Refresh the page and see the second paragraph go back to red (from .highlight).

6. Example 4: Inline Styles Trump Almost Everything

Now let’s see the top of the power chain: inline styles.

Inline styles are written directly in the HTML. They usually beat the CSS in your <style> block or external stylesheet.

Update your HTML like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Specificity Example 4</title>
  <style>
    p {
      color: blue;
    }

    .highlight {
      color: red;
    }

    #special-text {
      color: green;
    }
  </style>
</head>
<body>
  <p>This paragraph is blue.</p>
  <p class="highlight">This paragraph is red.</p>
  <p class="highlight" id="special-text" style="color: pink;">
    This paragraph is pink.
  </p>
</body>
</html>

What you’ll see:

First paragraph: blue
Second paragraph: red
Third paragraph: pink (from the inline style)

Even though we have an ID selector (#special-text { color: green; }), the inline style style="color: pink;" is more specific and wins.

Reminder: Inline > ID > Class > Type

Try it yourself

Remove style="color: pink;" from the third paragraph and refresh. It should now be green again (from the ID rule).

7. When Order Matters (and When It Doesn’t)

So far, we focused on specificity levels.

What happens if two rules have the same specificity?

In that case, the browser uses the rule that appears last in your CSS.

Example:

p {
  color: blue;
}

p {
  color: red;   /* Same selector, appears later → wins */
}

The paragraph will be red, because the second rule is later and has the exact same specificity.

But remember: order only matters when specificity ties. If one rule is more specific, it wins no matter where it appears.

8. Simple Rules to Remember

You don’t need to memorize the exact scoring system. For now, keep these rules in your toolbox:

Inline styles beat everything else.
ID selectors beat classes and types.
Class selectors (and attributes, and pseudo-classes like :hover) beat type selectors.
More pieces (like p.highlight) are usually more specific than simpler ones (like .highlight).
If specificity is the same, the rule written later in the CSS wins.

When your style isn’t showing up, ask yourself:

Is there an ID or inline style targeting the same element?
Is there a more complex selector (like p.highlight) that might be winning?

9. Try It Yourself: Build a Mini Specificity Lab

Here’s a fun mini exercise.

Create a new HTML file.
Add three paragraphs.
Write CSS that uses:
- A type selector: p { ... }
- A class selector: .note { ... }
- An ID selector: #warning { ... }
- An inline style on one paragraph
Predict which style will win for each paragraph.
Then open the file in your browser and check your guesses.

This kind of small experiment is a great way to make specificity feel natural.

10. Quick Recap & What’s Next

You’ve just learned the basics of CSS specificity, one of the most important concepts in CSS.

Key takeaways:

Specificity decides which CSS rule wins when multiple rules match the same element.
The basic power order is: Inline > ID > Class > Type.
Combined selectors (like p.highlight) are more specific than simpler ones.
If specificity is the same, the rule that appears later in your CSS wins.

If this still feels a bit confusing, that’s normal. CSS takes practice.

Next steps you can try:

Add more selectors (like div p.highlight) and see how they behave.
Inspect elements in your browser’s DevTools to see which rule is winning.

Every small experiment you do builds your intuition. Keep playing with examples, and soon you’ll be able to predict which style will win just by looking at the CSS.

Mudzinga