Easy CSS Question 6 of 229

How does CSS specificity decide which rule wins?

Frontend Master · Speak this in 60–90 seconds · Faridabad & Delhi NCR

PICTURE THIS: 1, 2, 2, 8

Mean3.25average
Median2middle
Mode2most often

Simple meaning

The browser scores inline styles, then IDs, then classes and attributes, then elements.

1

WHY — CSS instead of guessing?

Why interviewers care about CSS:

This is a process

question about CSS.

Panels listen for order,

trade-offs, and what you would actually do on a Frontend project - not buzzwords.

Stay structured

Name the idea, why it exists, then one short example.

Close cleanly

End with when you use it and one common pitfall.

2

STEPS — What happens step by step?

Before you speak the answer, walk the interviewer through these steps:

  1. 1
    The browser scores inline

    styles, then IDs, then classes and attributes, then elements.

  2. 2
    Equal specificity means the

    later stylesheet rule wins.

  3. 3
    I avoid !important except

    as a last resort because it makes later overrides painful.

  4. 4
    Give an example

    One tiny concrete case you can say aloud.

  5. 5
    Common mistake

    What juniors usually get wrong.

  6. 6
    Close

    When you pick this over the alternative.

3

EXAMPLE — See it in action

Here's a short line you can speak, broken into clear beats:

Say this line
“Equal specificity means the later stylesheet rule wins.”
Break into beats
Equalspecificitymeansthelaterstylesheet
Speaking order
2987408337471632900

Note: Adapt this scaffold to your own project — keep it under 60–90 seconds.

Key takeaway

The browser scores inline styles, then IDs, then classes and attributes, then elements. Equal specificity means the later stylesheet rule wins.

Chat with us