Why does bootstrap accept form styling for only one highly specific css classes?

Question

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

Answer 1

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):

• !important rules always take precedence, only another !important rule can override a previous one (its an accessibility feature of CSS, designed to override the UA stylesheet)
• The universal selector (*) has a specificity of 0
• Combinators like + and ~ also have no specificity
• Inline styles have the highest specificity (other than !important) and count as the first number (1,0,0,0)
• ID's (#test) count as the second number in the above set (0,1,0,0)
• Classes, pseudo-classes and attribute selectors are the third number (0,0,1,0)
• Type selectors and psuedo-elements (e.g. - <p> & ::after) take place of the fourth number, and are the least specific
• Remember that if two rules have the same specificity and specify the same property the latter in the stylesheet will win

Based on the above, the first selector has a specifictiy of (0,0,1,1) while the second only has (0,0,1,0)

Answer 2

CSS rules are applied from least specific to most specific.

You have:

Least Specific    More Specific                  Most specific
.anotherClass     input[type=...] (bootstrap)    input.someClass

So, in your example b-cell is more specific than bootstrap styles and a-cell is less.

You can force a-cell to take precedence with !important (but use !important with caution, as it might become a debugging hell):

.a-cell {
  background-color: green !important;