Select child element of element with attribute

Question

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;
}

score 1 · Accepted Answer · edited May 18 '14 at 01:05

1

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?

edited May 18 '14 at 01:05

BoltClock

700,868
160
1,392
1,356

answered May 17 '14 at 19:18

caffeinated.tech

6,428
1
21
40

Depending on the browsers you are catering towards, consider reading up on `normalize.css` – caffeinated.tech May 17 '14 at 19:56
1

See also the difference between the two http://stackoverflow.com/questions/20141450/should-i-use-css-disabled-pseudo-class-or-disabled-attribute-selector-or-is-i – BoltClock May 18 '14 at 01:06

score 0 · Answer 2 · answered May 17 '14 at 19:52

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.

Select child element of element with attribute

2 Answers2

Edit: