Why does the hover pseudo-class override the active pseudo-class

Question

The title basically says it all.

Suppose I have an element which I want to change color on :hover, but while clicked, I want it to swit

Answer 1

This is how it works, and I'll try to explain why. As we know CSS will continue searching the document when applying styles and apply the style that is most specific to the element.

Example:

li.betterList { better list styling here }

Is more specific and will overwrite

li { list styling here }

And these Puesdo selectors are all considered the same specificity and thus the last line will overwrite the previous one. This is confirmed by the note on W3Schools

Note: :active MUST come after :hover (if present) in the CSS definition in order to be effective!

you can also throw this CSS on your jsfidle and watch it overwrite since they are the same specificity

.works {background: red}
.works {background: green}