I have the following scss styles defined in a separate file

.radio-button-focused {
  background-color: $PURPLE;
  text-align: left;
  opacity: 1;
  width: px-to-rem(1248px);
  margin-bottom: px-to-rem(15px);
  @include truncate;
}

.radio-button {
  background-color: $BLACK;
  text-align: left;
  opacity: 1;
  width: px-to-rem(1248px);
  margin-bottom: px-to-rem(15px);
  @include truncate;
}

Both of them are being applied to a button

But the problem is that radio button is overwritting the color of radio-button-focused

I understand that I could use !important , or just use one of them instead of using them both at the same time. But if I was forced to use both, can something else be done to fix this?

CodePudding user response：

The literal order in the CSS file matters. If two rules have the same specificity, the last one is applied. Move .radio-button before .radio-button-focused. You could also make your focused selector more specific. .radio-button.radio-button-focused for example.

Here's class B before A as an example.

.b
{
  color: red;
}

.a
{
  color: blue;
}

<div class="a b">Hi</div>

And here's A before B.

.a
{
  color: blue;
}

.b
{
  color: red;
}

<div class="a b">Hi</div>