Combine CSS styles applied to ASP controls - html

Question

I am using DevExpress controls on ASP Web Forms Application. I would like to have different disabled styles for my buttons, so I've created some styles:
.dxmLite_Moderno .dxm-disabled, .dxmLite_Moderno .dxm-disabled a.dx {
color: rgb(1, 211, 211);
border-style: none !important;
height: 36px;
padding-top: 2px;
}
.red {
color: rgb(255, 0, 0) !important;
}
.blue {
color: rgb(0, 255, 0) !important;
}
First override style of button if it's disabled.
Second is overriding buttons which have:
<dx:MenuItem ItemStyle-CssClass="red" Text="D" ItemStyle-Width="104" Name="I">
ItemStyle-CssClass called 'red'.
Now question is - it's possible to combine those css styles in way:
if button is disabled and red => have style red
if button is enabled and red => I dont want any style
if button is disabled and blue => have style blue
if button is enabld and blue => I don't want any style
I am asking because now situation looks like if I have enabled / disabled button red it's always color of style red.

Answer 1

What is important you have wrong blue definition color.
Second remove any !important from css.
And finally combine dxm-disabled class with your colors class:
.dxmLite_Moderno .dxm-disabled.red {
color: #f00;
}
.dxmLite_Moderno .dxm-disabled.blue {
color: #00f;
}
I create the demo for you:
http://jsfiddle.net/YQG9B/1/