Menu
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?
334
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"]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
