I have a jsbin with a table of inputs, using bootstrap. What confuses me is that the style with
input.someClass {
background-color: blue;
}
is applied, as expected, but
.anotherClass {
background-color: green;
}
is not applied to my input elements. What is the reason for this? For reference, check out http://jsbin.com/enaris/3/edit
What is the reason for this?
It's simply a matter of specificity - the first selector has a type selector attached to the class name whereas the second selector only has a single class. The second selector is therefore more specific and takes precedence.
This is migrated from another answer of mine, it may help:
You can think of specificity as four numbers, starting with (0,0,0,0):
+ and ~ also have no specificity#test) count as the second number in the above set (0,1,0,0)<p> & ::after) take place of the fourth number, and are the least specificBased on the above, the first selector has a specifictiy of (0,0,1,1) while the second only has (0,0,1,0)
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments