Specificity
Specificity is the weighting system CSS uses when competing selectors from the same cascade origin and layer match the same element.
ID selectors, class-like selectors and type selectors contribute differently to specificity. Specificity is considered after cascade origin and importance rules.
Why one CSS selector can outweigh another
ID selectors, class-like selectors and type selectors contribute differently to specificity. Specificity is considered after cascade origin and importance rules. In practical terms, Specificity belongs to the presentation and layout layer. Knowing that layer is important because it tells you what the term can change, what it cannot change, and where to look when something behaves unexpectedly.
Comparing selector weights
.card .title generally outranks .title because the selector carries more class-level specificity.
Where specificity surprises developers
You do not need to memorize the term in isolation. It becomes useful when you can recognize it in the tool, browser, file or conversation where the concept is doing real work.
Specificity is only one part of the cascade
Specificity is the weighting system CSS uses when competing selectors from the same cascade origin and layer match the same element. By contrast, The CSS cascade is the set of rules used to resolve which declarations apply when multiple declarations target the same property on the same element. The two can appear in the same project, but they describe different parts of the work and should not be used as interchangeable labels.
The mistake: escalating with !important
The common mistake is to use Specificity as if it also meant Cascade. That blurs two separate decisions and usually sends troubleshooting in the wrong direction. A better test is practical: Use DevTools to inspect crossed-out declarations before adding !important or longer selectors.
Why predictable weighting keeps CSS manageable
In day-to-day work, Specificity matters when the concept needs to be identified precisely instead of being grouped with a nearby term. The practical value is not the vocabulary itself; it is being able to identify the right control, file, setting or decision when the concept becomes relevant.
.card .title generally outranks .title because the selector carries more class-level specificity. That example is useful because it turns the definition into something you can recognize, test and discuss with other people working on the same project.
Related terms worth learning next
Sources and further reading
Use these references when you need documentation-level detail, specifications or product-specific behavior beyond the plain-English explanation above.