MENU


Specificity

If different sets of CSS declarations pointing to the same element have conflicting rules, the set with the highest specificity will be chosen. Consider:

The colors, in decreasing order of preference, are:
green (inline styles have a very high specificity)
purple (id selectors have a high specificity)
pink (appears after that of cyan)
cyan (specificities added together)
orange (class and attribute selectors are equally specific)
blue (pure element selectors have a low specificity)
red (* has perhaps the lowest specificity)
RESETRUNFULL
<!DOCTYPE html><html><head>
<style>
   * {color:red;}
   p {color:blue;}
   #my_paragraph {color:purple;}
   .paragraph {color:orange;}
   p[style] {color: cyan;}
   p[class] {color: pink;}
</style>
</head><body>
   <p id="my_paragraph" class="paragraph" style="color:green;">What is my color?</p>
</body></html>

The keyword '!important' can be appended to a rule so that the rule is always chosen regardless of specificities. For instance, adding the '!important' keyword above to the first rule will make the text red in color:* {color: red !important;}