CSS selected tag higher than class

Question

<html>
<head>
    <style>
        input[type='text'], select {
            background: blue
        }

        .error {
            background: red
        }
    </style>
</head>
<body>
<input type="text" class="error"/>
<select class="error">
    <option>non-sense</option>
</select>
</body>
</html>

If the class .error has background red than it must be red. Even if input[type="text"] has a blue background. Tested in IE and GC.

score 5 · Answer 1 · edited May 23 '17 at 12:12

5

The reason for the problem you're seeing, is that input[type=text] is more specific than .error, so it will override it. Use a more specific selector:

input.error

Or if you want to really be safe:

input[type=text].error

More information about CSS specificity, and how it's calculated

Another approach would be to keep the current selector, but add the !important keyword on the rule:

.error { background: red !important; }

That would instantly make it override any other rules matched for the element. Beware, it's a very powerful tool, and may lead to unexpected results in the future.

edited May 23 '17 at 12:12

Community

1
1

answered Oct 29 '12 at 11:55

Madara's Ghost

172,118
50
264
308

So now what, based on my answer you improve your own? Bad! – Caelea Oct 29 '12 at 11:58
What if he uses `.error` on any number of tags, or unknown tags for that matter? – kontur Oct 29 '12 at 11:58
You could improve the answer by including a reference to CSS specificity, so that OP could get some clue as to what is "more specific" in this context. – eis Oct 29 '12 at 12:00
@kontur then the style will apply. Is that a bad thing? It wasn't specified that it should apply only to one instance. – eis Oct 29 '12 at 12:03
Any other rule not having `!important` you wanted to say I guess. Also beware of `style=""` attributes. – hakre Oct 29 '12 at 12:03
1

@Caelea: Your answer raised a possible solution. But you did not state the dangers of it in the long run. You just gave a solution and said "use this" without explaining. http://i2.kym-cdn.com/photos/images/original/000/420/481/35a.jpg – Madara's Ghost Oct 29 '12 at 12:06
1

@MadaraUchiha: Stop posting pictures please, it's not yet that time of day. I also think you already made your argument, no need to stress it. A little helpful edit in somebodies other question is often more straight to the point. – hakre Oct 29 '12 at 12:10
I wanted to set a default style for all text inputs without styling checkboxes or radios. The .error is a common class if some required fields don't have a proper value. The normal hierachy says: tags < classes < ids < style. But a more specific tag seems to have a higher priority than a class ( id and style not tested yet :) ) – ortreum Oct 29 '12 at 12:57
@ortreum: 2 classes > 1 class. 1 ID > 200 classes. That's how the specificity goes. `[atrribute=selectors]` == `.class` in that manner. If you want a more specific selector, you can simply add the `form` element before the selector, to add an additional point to the "elements", which changes the specificity in your favor :) – Madara's Ghost Oct 29 '12 at 12:59

score 2 · Answer 2 · edited Oct 29 '12 at 12:06

2

Use .error { background: red !important }

Be aware of the limitations this has, please see: !important rules (CSS 2.1 Section 6.4.2)

edited Oct 29 '12 at 12:06

hakre

193,403
52
435
836

answered Oct 29 '12 at 11:53

Caelea

2,318
15
22

3

Using `!important` so lightly will make your code a real headache in the long run. Beware! – Madara's Ghost Oct 29 '12 at 11:55
@MadaraUchiha so does stiling your css in the html rather than a separate file. I'm trying to solve his problem not learn him how to proper code his entire site – Caelea Oct 29 '12 at 11:57
@Caelea: True, but I can assume that for the sake of the question he prepared this snippet for us to see, so it can all be in one place. A reproducible test-case. Encouraging him to use `!important` on such a petty matter, is actively encouraging bad-practice. – Madara's Ghost Oct 29 '12 at 11:59
@Caelea: It's okay to leave the context of the concrete question and give a more general advice that is of use for further users, too. However, no need for so many downvotes if you would leave a little note about the limitations of that approach in my eyes. – hakre Oct 29 '12 at 12:05

score 0 · Answer 3 · answered Oct 29 '12 at 12:07

0

Try this

<html>
   <head>
       <style>

           input[type='text'], select { background: blue }
           .error { background: red; }
           input.error { background: red; }

       </style>
    </head>
    <body>
        <input type="text" class="error" />
        <select class="error">
            <option>non-sense</option>
        </select>
    </body>
</html>

answered Oct 29 '12 at 12:07

user1780324

1
2

that's working. but needless to say: css is a nightmare if you don't know every little its-not-a-bug-its-a-feature-feature D: – ortreum Oct 30 '12 at 11:41

CSS selected tag higher than class

3 Answers3