apply css class to "button" inside div

Question

I have a div containing a button as below,

<div id="parentDiv">
    <button id="myBtn" class="myclass">ADD ME</button>
</div>

a new attribute gets added to this button from JS and it becomes like below ('disabled' attribute is added)

<div id="parentDiv">
    <button id="myBtn" class="myclass" disabled="disabled">ADD ME</button>
</div>

I'm trying to apply below CSS class for disabled button,

#parentDiv button.disabled {
    color: #AAAAAA;
}

But to my surprise this class is not getting applied to button. Please point me the correct direction.

Answer 1

You need to add the attribute selector

#parentDiv button[disabled="disabled"] 
{
    color:red;
}

or just

#parentDiv button[disabled] 
{
    color:red;
}

#parentDiv button[disabled="disabled"] {
  color: red;
}

<div id="parentDiv">
  <button id="myBtn" class="myclass" disabled="disabled">ADD ME</button>
</div>

Answer 2

You can use CSS3 selector :disabled

#parentDiv button:disabled
{
    color:#AAAAAA;
}

DEMO HERE