How to let css selector exclude an element ?

Question

For example I have a css style like this :

    input.validation-passed {border: 1px solid #00CC00; color : #000;}

The javascript validation framework I use will inject every input tag with a class="validation-passed" .For the elements like <input type='text' /> ... , this is ok , but for <input type='button' /> , I want this is not applied , how should I do this ?

Answer 1

If you don't need to support IE6, you can use an attribute selector:

input[type="text"].validation-passed {border: 1px solid #00CC00; color : #000;}

Answer 2

.validation-passed:not(input[type="button"]) {color:red;}

Answer 3

The easy way is to use <button type="button>value</button> 
instead of the input button types-
but why do you need to add the class to the buttons anyway?

Why validate a click?

Answer 4

I don't think you can. But you can inject a little piece of javascript to parse your inputs and add the class text-validation-passed to all your text inputs with the class validation-passed (or remove the class from button input if you don't need it).