Home/ Questions/Q 7188285
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T19:02:44+00:00

As I understand it, a class should take precedence in styles over the element

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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"]
    • 0