Question

Suppose I have this HTML:

<div class="SomeClass">test</div>
<div class="SomeClass" id="SomeID">test</div>
<div class="SomeClass">test</div>

with this CSS

.SomeClass{color:blue;}
.SomeClass:hover{color:red}

I want the hover effect not to apply to the SomeID div. I can do this with jQuery but I was wondering if there’s an easier way to do it with just CSS.

Thanks for your suggestions.

Answer 1

CSS is parsed in order, meaning that if after you define

.SomeClass:hover { color: red; }

You then define a rule

#SomeId.SomeClass:hover { color: blue; }

That should ‘overwrite’ the initial color: red;