Specificity and !important

Basically, CSS rules cascade and rules specified later will override rules specified earlier.

However, different kinds of selector matches have different "weights" to them. In descencing order of priority/specificity:

• Any rules in style="..." attribute has the top priority, then
• The number of #id selector matches, then
• The number of .class selector matches (including [attr] and :pseudoclass), then
• The number of type selector matches (including ::pseudoelement).

So, after style="..." rules, it goes ID > class > type.

<!-- https://css-tricks.com/specifics-on-css-specificity/ -->
<ul id="summer-drinks">
  <li class="favorite">Whiskey and Ginger Ale</li>
  <li>Wheat Beer</li>
  <li>Mint Julip</li>
</ul>

ul#summer-drinks li {
  font-weight: normal;
  color: black;
}
.favorite {
  /* Does not get applied because there are conflicting rules
   * in `ul#summer-drinks li`, and `ul#summer-drinks li`
   * has higher specificity than `.favorite` */
  color: red;
  font-weight: bold;
  /* Has no conflicting rules, so this got applied. */
  font-size: 28px;
}

Specificity Calculation Example

Here's an example on how the number of match is calculated.

Note that the universal selector (*), combinators (" ", >, ~, +, ||), and the :not(...) pseudo-class has no effect on specificity. (The selectors inside :not(...) do, however.)

Using !important

If any CSS rule has the !important declaration (e.g. color: red !important;), then it "overrule all of the above calculations" and take the top priority.

Then, if multiple rules with !important clashes, refer to the calculations above to see which !important wins.

References

• Specificity (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
• Specifics on CSS Specificity (CSS-Tricks) — https://css-tricks.com/specifics-on-css-specificity/