CODEWITHSUNDEEP
htmlcss
user1679941
user1679941

Reputation:

Can I make my CSS depend on a class not being present?

I have the following CSS:

a.button:hover,
.mini-menu > li > a:hover {
    xxx
    }

Is there a way I can make this hover effect work for the button ONLY if the button does not have a class of "disabled"?

Upvotes: 1

Views: 92

Answers (6)

Joel
Joel

Reputation: 1670

Besides :not() - Another approach would be to leverage CSS Specificity and reset the styling with a higher scoring "disabled" class. 

a.button.disabled:hover,
.disabled.mini-menu > li > a:hover {
   xxx- disabled properties that won't be over ridden by below.
}


a.button:hover,
.mini-menu > li > a:hover {
    xxx
}

Working demo http://jsfiddle.net/bKyr3/

Upvotes: 0

StaticVariable
StaticVariable

Reputation: 5283

thy is can be done by the :not(.disabled) selector.

Set the css for all elements that don't have .disabled class

The :not(selector) selector matches every element that is NOT the specified element/selector.

enter image description here

Note:IE8 and earlier do not support the

Upvotes: 1

Viktor S.
Viktor S.

Reputation: 12815

Except :not selector, which is suggested here, you can also simply override hover class for a.button with disabled class (may be usefull if you support IE7 and 8):

a.button:hover,
.mini-menu > li > a:hover {
    xxx
}

a.button.disabled:hover {
   //css to set non-hover style
}

Simple demo

Upvotes: 1

Quentin
Quentin

Reputation: 943579

You can use the negation pseudo-class : :not(selector)

a:not(.disabled).button:hover,
.mini-menu > li > a:not(.disabled):hover { ... }

(Requires a supporting browser.)

Upvotes: 1

xdazz
xdazz

Reputation: 160853

You could use :not(.disabled) selector.

Upvotes: 0

BenM
BenM

Reputation: 53198

You can use the CSS3 :not() selector, but of course this has cross-browser compatibility implentations:

a.button:not(.disabled):hover,
.mini-menu > li > a:hover {
    xxx
}

Upvotes: 1

Related Questions