LET'S BE SPECIFIC: CSS SPECIFICITY EXPLAINED

Summary from the TLDR Web Dev newsletter

CSS specificity is an algorithm that browsers use to determine which CSS rules to apply when multiple rules target the same HTML element. The specificity is calculated using a three-column scoring system (ID-CLASS-TYPE) where ID selectors have the highest weight (1-0-0), followed by class selectors, attributes, and pseudo-classes (0-1-0), and finally type selectors and pseudo-elements (0-0-1). When comparing rules, browsers check the ID column first, then CLASS, then TYPE, and if all scores are equal, the rule that appears later in the CSS wins.