Question

Is that possible to have two styles for one element with different colors?

In other words, lets suppose I have following HTML code:

<table class='my_table'>
<th class="style1 style2">LastName</th>
...
</table>

and following CSS:

.my_table th.style1 { 
    background: #aaaaaa; 
}

.my_table th.style2 { 
    background: #bbbbbb; 
} 

I understand that I can remove one style with JavaScript for some condition. But I would like to have two styles and one of them should override another. Is that possible?

Answer 1

Yes, you can use any number of classes on an element. CSS uses both the declaration order and the specificity of the selectors to decide which will be overriden.

For example, if the specificity is the same, the last one is used:

.style1 { 
    background: #aaaaaa; 
}

.style2 { 
    background: #bbbbbb; 
} 

Otherwise, the most specific will be used (the first one on the example below):

.my_table th.style1 { 
    background: #aaaaaa; 
}

.style2 { 
    background: #bbbbbb; 
}