Question

I have this HTML code:

<ul>
    <li>Line 1</li>
    <li class="disabled">Line 2</li>
</ul>

And the corresponding CSS is:

ul li:hover {
    color: red;
}

This allows for both lis to be hovered over and have their color changed. But if I want one of them to be disabled, I’d use the following:

.disabled {
    color: grey;
}

But the other CSS code’s hover pseudo-class still has effect. Is there any way I can override this?

Answer 1

The first rule overrides it because of CSS specificity, i.e. it’s more specific.

Change second rule to:

ul li.disabled, ul li.disabled:hover{
    color:grey;
}