Knowledge Maxxing← Back to topic library
Dev MaxxingBeginnerHTML and CSS75 sec
CSS specificity
CSS specificity is the set of rules that decide which style wins when multiple CSS rules target the same element with conflicting values.
Prerequisite: CSS selector
What matters
Understanding specificity explains why a style you wrote is sometimes silently overridden by another rule elsewhere, rather than needing to guess or add '!important' as a workaround.
Example
An id selector like '#header' beats a class selector like '.header' targeting the same element, regardless of which rule appears later in the file.
Common misconception
Specificity is not primarily about the order rules appear in a file; more specific selectors win regardless of order, except when specificity is exactly tied.
Recall question
What decides which of two conflicting CSS rules actually applies?
Keywords and related concepts
CSS specificitycascadestyle conflictscss selector