CODEWITHSUNDEEP
csshtmlattributescss-selectors
Scott Decker
Scott Decker

Reputation: 4297

Select child element of element with attribute

I have a button. The button has a span tag inside of it for the text of the button. Sometimes the button may be disabled. When disabled, I'd like the button to be grey. Why doesn't this work? First the HTML, then the CSS

<button disabled>
    <span class="dark-disabled">Start New Game</span>
</button>

button:disabled span{
    background: #ccc;
}

But it will fire if I do a class selector instead:

button:disabled .dark-disabled{
    background: #ccc;
}

Upvotes: 0

Views: 70

Answers (2)

caffeinated.tech
caffeinated.tech

Reputation: 6548

You are looking for the CSS attribute selector

button[disabled] span{
  background: #ccc;
}

Edit:

I misread your question, both :disabled and [disabled] will work for a button. The sample you gave me works fine in Firefox: JSFiddle

What browser are you using?

Upvotes: 1

Frank Conijn - Support Ukraine
Frank Conijn - Support Ukraine

Reputation: 3190

All browsers, including IE8 and up, automatically give disabled buttons a different gray background. Just use this: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>
    <button>Start new game</button>
    <button disabled="disabled">Start new game</button>
</body>
</html>

Which will give the most consistent visual result across browsers as well.

Upvotes: 0

Related Questions