What is the order of precedence for CSS?

Question

I\'m trying to figure out why one of my css classes seems to override the other (and not the other way around)

Here I have two css classes

.smallbo         


        

Answer 1

What we are looking at here is called specificity as stated by Mozilla:

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.

I like the 0-0-0 explanation at https://specifishity.com:

Quite descriptive the picture of the !important directive! But sometimes it's the only way to override the inline style attribute. So it's a best practice trying to avoid both.