Override property value when additional class is added to an element

Question

I have always thought that if a property was defined after the previous property like I have as follows, that it would overwrite the previous value. But for some reason when using input[type=button] this isn't the case.

However, when changing input[type=button] to a class such as .btn the value overrides the previous, why is this? Is there a way around this without using !important?

input[type=button] {
  color: red;
  background-color: transparent;
}

.accent {
  color: white;
  background-color: blue;
}

<input type="button" value="Hello" class="accent">

see my update on how to calculate exactly the specificity... — Axel, Sep 10 '17 at 02:36
did another update to tell you the exact specificity input[type=button] vs. .accent — Axel, Sep 10 '17 at 02:53
Possible duplicate of [What is the specificity of the attribute selector?](https://stackoverflow.com/questions/11406953/what-is-the-specificity-of-the-attribute-selector) — , Sep 10 '17 at 02:58

score 2 · Answer 1 · edited Sep 11 '17 at 03:42

2

This is because input[type=button] is more specific then the class. You can fix this by adding the class to input.

input[type=button] {
  color: red;
  background-color: transparent;
}

input.accent {
  color: white;
  background-color: blue;
}

<input type="button" value="Hello" class="accent">

edited Sep 11 '17 at 03:42

answered Sep 10 '17 at 02:17

BrandonW

268
3
11

antoni · Answer 2 · 2017-09-10T07:54:10.647

1

Involving html attributes on top of html tag is a more refined selector than a class that is why it gets the priority in css. so you can refine the selector using input.accent and it will override.

You can have a look at this article which talk about css internal priorities: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

edited Sep 10 '17 at 07:54

answered Sep 10 '17 at 02:13

antoni

5,001
1
35
44

1

Instead of using non-standard and potentially confusing terms like "refined" and "priorities", why not just consistently use the correct term, which is "specificity"? – Sep 11 '17 at 03:41

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

I have always thought that if a property was defined after the previous property [...] that it would overwrite the previous value.

This is only true if these selectors have the same specificity.

Actual Specificity

input[type=button] /* specificity = 11 */
.accent /* specificity = 10 */

Imagine

<input type="button" id="id" class="class">

#id {}
.class {} /* will of course never ever override #id */
#id.class {} /* will override as well */

Each selector has his points that get summed up when combined.

There is also a nice "hack" if you must increase your selectors specificity:

.class {} will be overridden by .class.class {}

input[type=button] {
  color: red;
  background-color: transparent;
}

.accent.accent {
  color: white;
  background-color: blue;
}

<input type="button" value="Hello" class="accent">

Nice read anyway: https://css-tricks.com/specifics-on-css-specificity/

BTW I remember there is a very good website where you can read exactly how many points each selector has (id is strongest) but I can't find the resource anymore...

EDIT

Calculating Specificity

*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

Reference: https://www.w3.org/TR/css3-selectors/#specificity

`.accent.accent`, that seems like a cool little trick. Is that bad practice though? — Get Off My Lawn, Sep 10 '17 at 02:31
So in the end, all I had to do was take `input[type=button]` and change it to `[type=button]` — Get Off My Lawn, Sep 11 '17 at 03:50

Override property value when additional class is added to an element

3 Answers3

Actual Specificity

Calculating Specificity