My custom classes are not working while being used with predefined ones like "btn"

Question

First time here asking something myself! Here's the thing. I'm trying to use my own CSS classes for colors. Several of them don't work. Here's an example:

<button type="button" class="btn btn-ladevi_blue" data-toggle="modal" data-target="#loginModalCenter">
  Launch demo modal
</button>

Here the CSS:

.btn-ladevi_orange{
color: #FFFFFF;
background-color: #FFA700;
border-color: #FFA700;}

.btn-ladevi_blue{
color: #FFFFFF;
background-color: #00496B;
border-color: #00496B;}

Whenever I add something like "btn" before my custom class it gets ignored. When I "inspect" the element and go to check its attributes I can see that they are overridden. But if I change my custom class to something predefined like "primary" it obviously works and when inspected they aren't overridden and are working properly.

I checked this site:

https://codepen.io/ondrejsvestka/pen/NjxgVR

That's more or less what a want to achieve.

For now I'm going to bypass the problem by adding the attributes as styles within my HTML code (what I was doing with the others, but they are kind of growing in numbers, LOL!). But I'd like to know how to make this custom classes work with the predefined ones.

Thanks in advance!

Answer 1

This sounds like a CSS specificity thing, where the bootstrap .btn class is taking precedence because its selector is more specific.

From MDN's Cascade and Inheritance (emphasis added):

The amount of specificity a selector has is measured using four different values (or components), which can be thought of as thousands, hundreds, tens and ones — four single digits in four columns:

• Thousands: Score one in this column if the declaration is inside a style attribute, aka inline styles. Such declarations don't have selectors, so their specificity is always simply 1000.
• Hundreds: Score one in this column for each ID selector contained inside the overall selector.
• Tens: Score one in this column for each class selector, attribute selector, or pseudo-class contained inside the overall selector.
• Ones: Score one in this column for each element selector or pseudo-element contained inside the overall selector.

button.btn { /* class name (10) + element (01) = 0011 */
  color: blue;
}

.my-btn { /* class name = 0010 */
  color: red; /* overridden by button.btn because it's more specific than a single classname; 0011 > 0010 */
}

In the example above the button.btn selector has a specificity score of 11: the button tag name is 01, and the .btn class name is 10 for a total of 11.

The .my-btn selector has a score of 10 (single class name) so it loses to the previous selector.

The solution is to make your selector more specific. One quick hack that works in many situations is to simply repeat your selector in the CSS, which increases its specificty:

.my-btn.my-btn {
  color: red; /* more specific than the single classname selector below */
}

.my-btn {
  color: blue; /* overridden by more specific selector above */
}

Repeating the same class name, as in .my-btn.my-btn, doesn't change which elements the selector finds, but it increases the specificity score from 0010 to 0020 (class name (10) + class name (10)), so it wins over the single class name selector that follows, even though the latter appears later in the stylesheet.

You could, as others have suggested, just tack !important on to everything, but that can cause problems down the road when you want to further modify an element's style. You end up fighting to override !important, which is more complicated and confusing than simply observing specificity rules.