How CSS specificity works …??

Assuming the browser has already determined the set of rules for an element, each rule is assigned a matrix of values, which correspond to the following from highest to lowest specificity:

Inline rules (binary — 1 or 0)

Number of id selectors

Number of class, pseudo-class and attribute selectors

Number of tags and pseudo-element selectors

When two selectors are compared, the comparison is made on a per-column basis (e.g. an id selector will always be higher than any amount of class selectors, as ids have higher specificity than classes). In cases of equal specificity between multiple rules, the rules that last in the page’s style sheet are deemed more specific and therefore applied to the element.