Question

Consider a <div class="well well-large well-small" /> with the following styles from twitter bootstrap https://github.com/twitter/bootstrap/blob/master/less/wells.less

 // Base class
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: @wellBackground;
  border: 1px solid darken(@wellBackground, 7%);
  .border-radius(@baseBorderRadius);
  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
  blockquote {
    border-color: #ddd;
    border-color: rgba(0,0,0,.15);
  }
}

// Sizes
.well-large {
  padding: 24px;
  .border-radius(@borderRadiusLarge);
}
.well-small {
  padding: 9px;
  .border-radius(@borderRadiusSmall);
}

How does CSS decide which padding to apply in situations such as this? Will it be 19px, 24px, 9px or undefined value? My understanding of specificity is rudimentary and it seems that there is a specificity tie in this case between the .well .well-large and .well-small

Answer 1

If the specificity is equivalent, they are applied in order of definition.

Example:

.a {
    color: red;
}
.b {
    color: blue;
}

---

<span class="a b">this is blue</span>
<span class="b a">this is blue</span>

---

If you’re curious, here is the rules of how styles are cascaded.