CODEWITHSUNDEEP
csshover
Frankey
Frankey

Reputation: 3757

css :hover on ul li, don't do that hover on ul li.dont-hover but not with override

I am wondering if the following is possible, couldn't find it while searching for it the last half hour so here it is.

i got a unordered list

<ul>
 <li class="head">Day 1</li>
 <li>10:00</li>
 <li>12:00</li>
 <li class="head">day 2</li>
 <li>10:00</li>
 <li>14:00</li>
</ul>

<style>
ul li.head {
 background-color:green;
}
ul li:hover {
 background-color:red;
}
</style>

Now, if you hover over the li.head it also gets a red backgound.

So my question is, is there something like 

<style>
ul li.head {
 background-color:green;
}
ul li:hover !for li.head {
 background-color:red;
}
</style>

I just want to know if there is something like this in css and I am not looking for other solutions, that is not my point.

To make it clear, I do not want to override it like

<style>
ul li.head {
 background-color:green;
}
ul li:hover {
 background-color:red;
}
ul li.head:hover {
 background-color:green;
}
</style>

Nor do I want 

<style>
ul li:hover {
 background-color:red;
}
ul li.head {
 background-color:green;
}
</style>

I just want to know if there is anything like it in css.

note: You might think why if you can simply override it with this code, but I really simplified this as a example.

Upvotes: 0

Views: 368

Answers (1)

PSL
PSL

Reputation: 123739

You can try this:-

No need to override. you can specify :not() to filter unwanted ones out.

Sample Demo

ul li:not(.head):hover {
 background-color:red;
}

Not supported below IE9 though.

Ref :not()

Upvotes: 6

Related Questions