CODEWITHSUNDEEP
csscss-selectors
Wouter0100
Wouter0100

Reputation: 450

Input and class based styling CSS

Is there a simple way to prevent using a style when the class is 'chatInput'. Example HTML:

<input type="button" value="hello" class="chatInput"/>

And CSS something like:

input[type=button&class!=chatInput], input[type=submit&class!=chatInput]{
    border: 1px solid grey;
    padding: 2px 10px 2px 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

Thanks

Upvotes: 1

Views: 3219

Answers (3)

Cat
Cat

Reputation: 67502

In CSS3, you can use the :not() selector:

input[type=button]:not(.chatInput), input[type=submit]:not(.chatInput){
    border: 1px solid grey;
    padding: 2px 10px 2px 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

In CSS2, and more specifically IE8 and lower, you cannot do this. You have to do something like:

input[type=button] {
    border: 1px solid grey;
    padding: 2px 10px 2px 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}
input[type=button] .chatInput {
    /* Explicit default style */
}

Upvotes: 1

circusdei
circusdei

Reputation: 1967

Mozilla works with

:not(.classname) input {background: red;}

though i try to avoid negative css. perhaps everything else (besides .chatInput) should have an additional class.

Upvotes: 0

tuff
tuff

Reputation: 5153

You can use the :not selector:

input[type=button]:not(.chatInput), input[type=submit]:not(.chatInput)
    border: 1px solid grey;
    padding: 2px 10px 2px 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

Upvotes: 7

Related Questions