The Basics of CSS Specificity

In this lesson you'll learn the CSS concept of specificity, so you can understand which style takes priority when several styles conflict. This is for people searching "what is CSS specificity" or "CSS priority order."

When several styles are specified for the same element, the rule that decides which one wins is called specificity. As a rule of thumb, priority increases in the order "id selector > class selector > tag selector."

The sample code specifies different colors using three selectors — a tag selector (p), a class selector (.highlight), and an id selector (#special) — confirming the difference in strength between each. You can see how the final color differs between two paragraphs that share the same .highlight class, based on whether or not one also has an id.

A common beginner stumbling block is mistakenly assuming that whichever CSS was written later always wins. In reality, whichever selector has higher specificity wins, so a rule written later with lower specificity does not override an earlier, higher-specificity one. A lot of the trouble beginners run into with "I wrote CSS but it's not being applied" comes down to this misunderstanding about specificity.

Understanding how it works greatly reduces how often you get tripped up by unintended overrides. In large projects, a widely adopted guideline is to design mainly around class selectors, avoiding unnecessarily high specificity.