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.
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;
#SomeId.SomeClass notation is a bit redundant, I think: id is applied to a single element by definition. And because of specificity its rules will override the class' ones.
Just assign another rule to the div with an id of SomeID. This will override the other rule.
.SomeClass{color:blue;}
.SomeClass:hover{color:red}
#SomeID:hover{color:blue}
Just overwrite the style:
#SomeID:hover {
color:blue;
}
Alternatively, you could use:
.SomeClass:not(#SomeID):hover {
color:red;
}
Then it is easier to change it, but less browser support.
Let's take a look at link pseudo-class specificity:
Remember: LAHV (:link, :active, :hover, :visited).
First, in order to cascade properly, let's assign the following to .SomeClass:
.SomeClass:link, .SomeClass:active, .SomeClass:visited { color: blue; }
.SomeClass:hover { color: red; }
Next, let's specify #SomeID:
#SomeID:hover { color: blue; }
id always takes precedence over class.
.SomeClass, #SomeID:hover {color:blue;}be considered as an easier way? ) Should do the trick by specificity.