Question

In these styles I have three class: .gen-btn, .login_selection_button, and .gen-btn-disabled. I would like that the button with the class .gen-btn-disabled never changes styles based on :active or :hover. I have it set up in my stylesheet as the last style on the page, and it is written in the input’s class-declaration as the last item.

Currently I have gen-btn-disabled set so that it’s normal state, active state, and hover state are the same as the style as gen-btn. That is to say, I would like it always to keep the same styles as gen-btn has in its normal state.

However it seems redundant, and like I should just be able to put it at the top of the sheet, right next to gen-btn, since it is the last style declared on the input (ie: <input type="button" id="login_webview" class="gen-btn login_selection_button gen-btn-disabled" value="&rarr;" />​)

gen-btn-disabled still takes all the styles from active and hover and focus. I don’t understand what I’ve done wrong. Thanks for looking!

http://jsfiddle.net/loren_hibbard/vax98/3/

Answer 1

You’re assuming that lower placement in the stylesheet means higher priority. In CSS, the more specific the selector, the higher priority. There are many other factors that determine priority, but in your case this should work –

Just use a more specific selector for the disabled class:

input[type="button"].login_selection_button.gen-btn-disabled{
    /* disabled styles here */
}

And as Zeta pointed out, applying specific styles generically can lead to unwanted effects. I suppose my observation was more that the padding and font sizes were different and by selectors, the first declaration would take priority no matter where the disabled style was defined.