I am trying to hide "left-arrow" when it is disabled. However i can't seem to get the CSS right.

[data-tour-elem="left-arrow"] {
    display: none;
}

CodePudding user response：

You are using it wrong. You have to use the : selector, not ..

button {
  border: 5px solid lime;
}

button:disabled {
  border: 5px solid aqua;
}

<button>
  Not disabled
</button>

<button disabled>
  Disabled
</button>

<button onclick="this.disabled = true;">
   Click to disable
</button>

This code gives the active buttons a lime border, and the disabled ones an aqua border.

You can learn more about CSS selectors: MDN CSS selectors MDN disabled selector DevDocs disabled selector