I came across the situation the other day where I wanted to apply a CSS rule when two classes appeared in the same element. The Html generated was a div containing buttons. I wanted to apply a custom background to one of the items in the list.
The Rendered Html
As you hover over each of the button elements JavaScript toggled the
button-hover class.
| div class="buttons"> |
| button class="button-1">Okbutton> |
| button class="button-2 button-hover">Cancelbutton> |
| div> |
I wanted to have background image change on all of the list elements when
button-hover was applied. The problem was I wanted to have a custom roll over images for each of the buttons.
The CSS
After a some re-reading of the CSS rules, the solution turned out to be quite straight forward. I could use the attribute value selector to test for the second class.
| .buttons .button-1[class~="button-hover"] |
| { |
| background: red; |
| } |
| .buttons .button-2[class~="button-hover"] |
| { |
| background: green; |
| } |