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

First of all, based on your @extend directive, it seems you're not using pure CSS, but a preprocessor such as SASS os Stylus.

Now, when we talk about "order of precedence" in CSS, there is a general rule involved: whatever rules set after other rules (in a top-down fashion) are applied. In your case, just by specifying .smallbox after .smallbox-paysummary you would be able to change the precedence of your rules.

However, if you wanna go a bit further, I suggest this reading: CSS cascade W3C specification. You will find that the precedence of a rule is based on:

1. The current media type;
2. Importance;
3. Origin;
4. Specificity of the selector, and finally our well-known rule:
5. Which one is latter specified.

Answer 2

AS is state in W3: W3 Cascade CSS

the orden that different style sheet are applied is the following (quote from W3 cascading section):

1. user agent declarations

2. user normal declarations

3. author normal declarations

4. author important declarations

5. user important declarations

More information about this in the referred W3 document