CSS Input (button) Border Specificity

Question

As I understand it, a class should take precedence in styles over the element styles. I've tried to style button, input[type=button], and input[type=submit] and noticed that with the input (button and submit), the border style from the element would take precedence over the border style for the class. I did not notice this behaviour, however, on the button element.

Here's an example demonstrating the situation:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style>
        input[type=button], button {
            border: none;
        }

        .class {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <input type="button"  class="class" value="With class" />
    <input type="button" value="Without class" />
    <button class="class">With class</button>
</body>
</html>

The above renders like this:

I've noticed the same behaviour in Safari, Firefox, and Chrome.

Am I doing something wrong? Have I misunderstood specificity in this case? Is this specific to border only?

zzzzBov · Accepted Answer · 2012-01-25 15:38:00Z

8

You're not comparing apples to apples. Attribute selectors have a specificity of 0,1,0 just like classes. However, element selectors have a specificity of 0,0,1, which makes your first selector of input[type="button"] have a specificity of 0,1,1 which is greater than 0,1,0.

http://www.w3.org/TR/CSS2/cascade.html#specificity

If you wanted them both to have the same specificity, you should use:

input.class
input[type="button"]

-or-

.class
[type="button"]

answered Jan 25, 2012 at 15:38

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

0b10011 Over a year ago

Add example comparing 'apples to apples', perhaps? (edit: added better example)

alexcoco Over a year ago

Thank you! I wasn't aware that attribute selectors have a higher specificity than element selectors, my bad!

Rodrigo · Accepted Answer · 2012-01-25 16:07:28Z

1

An attribute selector + the element selector have a higher specificity than a simple class selector.

Possible fix:

.class, .class[type] {
    border: 1px solid red;
}

this way you can apply the class "class" to any element with a type specified and achieve the results you wanted.

answered Jan 25, 2012 at 16:07

Rodrigo

7048 silver badges20 bronze badges

Collectives™ on Stack Overflow

CSS Input (button) Border Specificity

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related