Why does a new custom class take precedence over a differently named class from a previously loaded file?

Question

I'm using Bootstrap 4 loaded from the CDN. I add a new class defined as:

.pt-10 { padding-top: 10rem !important; }

The css files are loaded in the html document in this order:

<link href="bootstrap cdn css...">
<link href="my file">

In the following html code, I define an element like this:

<div class="pt-10 pt-lg-0">

My desire is that this should work in the same way bootstrap spacing classes work, where I get pt-10 padding when I'm on classes below the lg scale, and pt-lg-0 padding when on lg and higher.

The result: pt-10 takes precedence over the pt-lg-0 class all the time - doesn't matter the screen size.

But if I copy bootstrap's exact code for the pt-lg-0 class and just paste it into my custom file (before the pt-10 definition), it works exactly as I want it to.

I don't understand why this works one way but not the other? It seems like it might be related to the !important but I don't really get why. Can someone shed some light on this?

Answer 1

Rule #1: CSS files are processed from top to bottom

That's why it's called "Cascading Style Sheet". Cascading from top to bottom is its natural order. Since you include bootstrap files followed by your custom files, your custom styles will win.

For example:

// Bootstrap declaration
.pt-0 {
    padding-top: 0 !important;
}

// Your custom styles
.pt-10 {
    padding-top: 10rem !important;
}

They both apply to the property padding-top, and they both have !important. So the later loaded styles will win!

Just want to clarify: the following works just because of the same reason: .pt-lg-0 is defined later in the file than where .pt-5 is defined.

<div class="pt-5 pt-lg-0">...</div>

.pt-5 is defined at line 8185 and .pt-lg-0 is defined at line 9157 in the bootstrap.css file.

Rule #2: selector with higher specificity wins

If there are many selectors apply to the same element property, the one with higher specificity wins.

For example, if your layout looks like this:

<div id="test-container" class="container">
    <div class="pt-10 pt-lg-0">
        ...
    </div>
</div>

and you have styles like this:

.container#test-container .pt-10 {
    padding-top: 0rem !important;
}

.container .pt-10 {
    padding-top: 5rem !important;
}

.pt-10 {
    padding-top: 10rem !important;
}

Then regardless of the style loading orders, the padding top would be 0rem because the ID selector has a higher specificity.

Rule #3: media queries have no specificity!

You thought the padding top will reset to 0 because you might think bootstrap has that padding-top: 0rem !imporant at large breakpoint? It won't. In fact, the rules inside media queries don't have precedence over other style rules in the same stylesheet.

Hence your .pt-10 takes precedence over the .pt-lg-0 class all the time, because of the Rule #1.

Solution

To get what you want, just simply remove !important from your custom class:

.pt-10 {
    padding-top: 10rem;
}

This will work because:

1. Your style is loaded after bootstrap, and there is no padding-top defined for the same element, so your 10rem padding top will apply!
2. At large breakpoint, since .pt-lg-0 from bootstrap has !important, that has higher precedence and hence will override your 10rem padding top style! If you put !important in your 10rem padding top style, then they will have the same specificity. Hence whoever defined later wins.

demo: https://jsfiddle.net/davidliang2008/9sqn4xch/16/