Styling Semantics – The Disabled Example

The Markup

<button disabled>…</button>
<a aria-disabled="true">…</a>
<any-thing aria-disabled="true">…</any-thing>

The CSS

If you can, use layers to make sure those modifiers will be applied over component/element styles.

@layer components, modifiers;

@layer components {
  button, .button { … }
  a, .link { … }
}

@layer modifiers {
  :disabled, [aria-disabled="true"], [disabled] {
    opacity: 0.7;
    cursor: not-allowed;
  }
}

If you don’t have the possibility to leverage CSS Layers, you can increase the selector’s specificity without using !important by repeating the selector (as many times as needed):

:disabled:disabled,
[aria-disabled="true"][aria-disabled="true"],
[disabled][disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}