Priority of one css attribute value over another

Question

For a button I have 3 possible classes: "state-normal", "state-focus" and "state-hover". All have the same attributes (background, border, ...), but different values for the attributes.
If a button gets "state-focus", I do not want to remove the class "state-normal".
If a button is "state-focus" and gets "state-hover", I do not want to remove the class "state-focus".
In the browser language specification you can give a "quality"/priority to a language:

"Accept-Language: da, en-gb;q=0.8, en;q=0.7"

It would be great to do the same also in css:

.state-normal { background-color: #aaaaaa;q=0.5 }
.state-focus  { background-color: #bbbbbb;q=0.7 }
.state-hover  { background-color: #eeeeee;q=0.9 }

I know that there is nothing in CSS.

But, I know in jQuery UI they have kind of this, because they don't remove "ui-state-default" when they assign "ui-state-focus" to an element. How do they do it?

Is there another way to implement this with a trick (WITHOUT !IMPORTANT).

Thanks alot in advance

score 3 · Accepted Answer · edited May 23 '17 at 12:30

You can do this using CSS.

.state-normal { background-color: #aaaaaa;q=0.5 }
.state-normal.state-focus  { background-color: #bbbbbb;q=0.7 }
.state-focus.state-hover  { background-color: #eeeeee;q=0.9 }

But this implies that all classes mentioned in the rule will be present, i.e. an element will have both classes present. So an element with class state-focus will not have the background-color set as per the rule.

If you want to avoid that, then you can do this instead:

.state-normal { background-color: #aaaaaa;q=0.5 }
.state-focus, .state-normal.state-focus  { background-color: #bbbbbb;q=0.7 }
.state-hover, .state-focus.state-hover  { background-color: #eeeeee;q=0.9 }

EDIT: As per OP's request

CSS Specificity

CSS Selectors - MDN

Priority of one css attribute value over another

1 Answers1