CSS rules for multiple attributes

Question

I want to set some CSS rules for an input button of type submit, which does not have disabled set to true, and which has the hover selector enabled.

The following syntax doesn't quite work for me:

input[type="submit"]:hover[disabled~="true"]:hover

What's the solution?

Answer 1

~= does not mean "is not equal to", despite the ~. It means something different entirely (but what it specifically means is outside the scope of this question).

The disabled attribute in HTML is a Boolean attribute, which means it doesn't have a specific value per se (unless you're talking about XHTML, but that's a different matter entirely). You're probably looking for an input that does not have the attribute at all, as opposed to it having a value that is not true. In which case, you would use:

input[type="submit"]:hover:not([disabled])

Better yet, if you can afford the browser compatibility, use the :disabled pseudo-class instead of an attribute selector so you do not have to worry about possible attribute values:

input[type="submit"]:hover:not(:disabled)

(Note that I've also removed the extraneous :hover at the end of your selector which I presume was a mistake.)

Answer 2

You could use

input[type="submit"]:enabled:hover {
  background: red;
}

Note that IE<9 does not support the enabled selector.

See this JSFiddle for an example.