CODEWITHSUNDEEP
csssass
Chris
Chris

Reputation: 14218

css class override property to use the value from another class

I have two predefined classes (btn, fc-btn)

Both define the value for background-color and other properties:

.btn {
    background-color: red;
    ....
}

.fc-btn {
    background-color: blue;
    ....
}

Now I have an element that uses both classes:

<button class="btn fc-btn">Action</button>

Is there a way to make sure that the fc-btn background-color is ignored and the value from btn is used (regardless of selector hierarchy).

e.g. override the fc-btn property.

.fc-btn {
        background-color: unset/inherit/???;
}

Problem: unset seems to also unset the value from btn inherit does not work because btn is not a class of the parent but of itself

Comment: I know that I could just remove the background-color from the original fc-btn class, but it comes from an external library and I would rather override it

Upvotes: 0

Views: 2283

Answers (2)

sanjay
sanjay

Reputation: 226

@Chris In your css file place your ".btn " class below to ".fc-btn" class. A browser will automatically give priority to ".btn" class because it reads from the bottom.

Upvotes: -1

Muthu Kumaran
Muthu Kumaran

Reputation: 17910

Add a new stlye with .btn.fc-btn

.btn.fc-btn{
  background-color: red;
}

or you can add !important to background in .btn style which is not recommended,

.btn {
    background-color: red !important;
    ....
}

Or If you can't modify CSS then set an inline style to the button

<button class="btn fc-btn" style="background:red">Action</button>

Upvotes: 1

Related Questions