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.