CODEWITHSUNDEEP
csscss-selectors
Adam Rackis
Adam Rackis

Reputation: 83356

Add less specific class without !important

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?

Upvotes: 0

Views: 2247

Answers (4)

bpaulon
bpaulon

Reputation: 356

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

Upvotes: 3

Einacio
Einacio

Reputation: 3532

to make .selected class more general so it can be anywhere and not only on .bookItem elements, it worked for me forcing the .selected style on hover

.selected,.selected:hover { background: rgba(0,150,255,0.2)}

a working example

Upvotes: 2

Sotiris
Sotiris

Reputation: 40066

I would suggest to change the specificity of .selected to .bookItem.selected

Demo: http://jsfiddle.net/WK34y/

Upvotes: 2

CBRRacer
CBRRacer

Reputation: 4659

This is a problem of specificity. In you stylesheet define .selected like this

div item#books .selected {bacground: rgba(0,150,255,0.2);}

http://css-tricks.com/855-specifics-on-css-specificity/

Upvotes: 1

Related Questions