Creating a single disabled css class for multiple classes

Question

I have multiple css classes that make up a button using SCSS.

.ghost-button {
// CSS goes here
}
.ghost-button-label {
// CSS goes here
}
.plus-circle {
//CSS goes here
}

Using Angular I can control the disabled state using the following feature.

[class.disabled]="booleanFlag"

I wanted to have a disabled state for this button with out having multiple disabled classes like so,

.ghost-button.disabled {
// CSS goes here
}
.ghost-button-label.disabled {
// CSS goes here
}
.plus-circle.disabled {
//CSS goes here
}

This is an example of what I am trying to do. This did not work for me.

.ghost-button .ghost-button-label .plus-circle-position .disabled {
    //CSS goes here
}

Here is the markup I use for the button,

<div style="padding-top: 10px" (click)="handleClickAdd($event)">
    <div class="ghost-button ghost-button-label icon-custom icon-margin plus-circle plus-circle-position" [class.disabled]="blockAdditions">
        <div>
            <div>Add</div>
        </div>
    </div>
</div>

Is there a way to do this? Thanks.

Answer 1

This doesn't work because it means each class is a descendant of the previous:

.ghost-button .ghost-button-label .plus-circle-position .disabled {
    //CSS goes here
}

If you're trying to just select that one div with all four classes, just remove the spaces:

.ghost-button.ghost-button-label.plus-circle-position.disabled {
    //CSS goes here
}

If you're trying to select any elements that have the disabled class plus one of the three other classes, then you use commas to separate the different combinations:

.ghost-button.disabled,
.ghost-button-label.disabled,
.plus-circle-position.disabled {
   // CSS
}

Of course you could just select .disabled if you want this CSS applied to every element with the disabled class:

.disabled {
  // CSS
}

Just be sure to take into account View Encapsulation. You may need to put this CSS in the global style file styles.css if this class exists in more than one component.

---

Just a note, you are not setting the disabled state here, you are adding a class with the name "disabled". disabled is a boolean attribute you can set via HTML, which you can then select with the pseudo-class :disabled.

button:disabled {
  color: red
}

<button>Not Disabled</button>
<button disabled>Disabled</button>

If this is what you were actually trying to do then in Angular it would be:

[disabled]="booleanFlag"

Answer 2

You can target a disabled element with the :disabled pseudo-class https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled

So depending on the relationship between your button/label/plus-circle you should be able to target those as well based on whether the button is disabled. For example, if the button and label are siblings you could do this:

.ghost-button:disabled,
.ghost-button:disabled + .ghost-button-label,
.ghost-button:disabled + .plus-circle {
// CSS goes here
}

That would only work if the label and circle were siblings that come after the button, if they are before the button, you can't select them that way.