Home/ Questions/Q 6637657
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T23:20:27+00:00

I have the following CSS rules: .bookItem:hover { background: rgba(0,150,255,0.1); } .selected { background:

  • 0

I have the following CSS rules:

.bookItem:hover { background: rgba(0,150,255,0.1); }

.selected { background: rgba(0,150,255,0.2) !important; }

When a bookItem is clicked, I use jQuery to add the selected class to it. The trouble is, without the !important the selected class does not show until the mouse is no longer hovering. I know this is because the :hover pseudoclass makes this selector “more specific”.

Is it possible to change the .selected class to cause it to take higher precedence than :bookItem:hover without the !important?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, in my opinion, you should reconsider using this css keyword at all. !important is a tool too powerful and it mainly destroys all the hierarchy css has, making it very difficult to debug your code. Its usage should be restricted to a small number of extreme examples when there is no way out.

    Again, in my opinion, you should try to use as many html tags as possible, then use classes and ids, and lastly the specific atributes on css. I would go with the composed class like my fellows suggested:

    .bookitem.selected { back... ; }

    Finally, for additional information, you can read this post at smashing magazine

    • 0