CODEWITHSUNDEEP
jqueryhtmlcss
nikib3ro
nikib3ro

Reputation: 20596

CSS pseudo class overrides class

I have following CSS:

input:not([type=submit]):not([type=file]) {
    width: 500px;
}

.filterTextbox {
    width: 150px;
}

I want to be able to assign filterTextbox class to certain input elements and have textbox be 150px wide. What is happening now, as you can guess, is that first style overrides the .filterTextbox class and I end up having all input textboxes 500px wide.

So, any idea on how to easily resolve this?

Upvotes: 0

Views: 231

Answers (3)

Yotam Omer
Yotam Omer

Reputation: 15356

One option is to use !important:

.filterTextbox {
    width: 150px !important;
}

The first rule is more specific thus getting higher priority. The !important keyword let's the browser know which rule is the desired one, regardless of it's priority.

A better practice however will be not using !important as a few suggested in the comments. You can do something like this: (working jsFiddle)

input[type="text"].filterTextbox {
    width: 150px;
}

Which will be more specific than the first rule.

Upvotes: 2

Benjamin Gruenbaum
Benjamin Gruenbaum

Reputation: 276266

Here is another option not using !important:

input:not([type=submit]):not([type=file]):not(.filterTextbox) {
    width: 500px;
}

input.filterTextbox {
    width: 150px;
}

Since the upper rule is the 'excluding' one - adding one more exclusion seems more reasonable than using !important.

I would probably use classes for the input I'd like to match, or use a more fluid layout altogether.

Upvotes: 4

Noah T
Noah T

Reputation: 235

change

.filterTextbox {
    width: 150px;
}

to

.filterTextbox {
     width: 150px !important;
}

That should override anything else being applied to it.

Upvotes: 1

Related Questions