Menu
CSS Question: If two different selectors apply to an element, who wins?
I know this shouldn't happen, but I want to tweak a legacy application, and the CSS is getting in the middle.
950
Class and ID selector example If more than one rule applies to an element and specifies the same property, then CSS gives priority to the rule that has the more specific selector. An ID selector is more specific than a class selector, which in turn is more specific than a tag selector.
The gory details in the spec are actually reasonably readable. In summary:
!important rules and inline style rules win most.
Otherwise, normally the more specific wins. #id is a more specific selector than .classname is a more specific selector than tagname.
Where rules are equally specific, the one declared last wins.
There is no particular reason why this ‘shouldn't happen’. It's normal to specify a broad-brush rule and then add a more specific rule to target one case; multiple same-property rules on a single element are not unusual or undesirable.
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
