Priority of one css attribute value over another

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


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

Similar answer

Need Your Help

Load CSV with SQLLDR (Rejected)

oracle csv load sql-loader ctl

i have CSV file. i want to load content of csv file to oracle database with SQLLDR.

only one out of 3 datanodes gets started in Hadoop?

hadoop mapreduce hdfs

I have one master and three slave cluster. NO Virtual environment. Its all in in network.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.