CSS Specificity is one of the most difficult concepts to grasp in Cascading Stylesheets. The different weight of selectors is usually the reason why your CSS-rules don’t apply to some elements, although you think they should have. In order to minimize the time for bug hunting you need to understand, how browsers interpret your code. And to understand that, you need to have a firm understanding on how specificity works. In most cases such problems are caused by the simple fact that somewhere among your CSS-rules you’ve defined a more specific selector.
CSS Specificity isn’t simple. However, there are methods to explain it in a simple and intuitive way. And that’s what this article is all about. You’ll understand the concept if you love Star Wars. Really.
Let’s take a look at some important issues related to CSS Specificity as well as examples, rules, principles, common solutions and resources.
  • You can find the most important things you should know about CSS specificity in a brief overview at the beginning of the article.

CSS Specificity: An Overview

  1. Specificity determines, which CSS rule is applied by the browsers.
  2. Specificity is usually the reason why your CSS-rules don’t apply to some elements, although you think they should.
  3. Every selector has its place in the specificity hierarchy.
  4. If two selectors apply to the same element, the one with higher specificity wins.
  5. There are four distinct categories which define the specificity level of a given selector: inline styles, IDs, classes+attributes and elements.
  6. You can understand specificity if you love Star Wars: CSS Specificity Wars.
  7. You can understand specificity if you love poker: CSS Specificity for Poker Players
  8. When selectors have an equal specificity value, the latest rule is the one that counts.
  9. When selectors have an unequal specificity value, the more specific rule is the one that counts.
  10. Rules with more specific selectors have a greater specificity.
  11. The last rule defined overrides any previous, conflicting rules.
  12. The embedded style sheet has a greater specificity than other rules.
  13. ID selectors have a higher specificity than attribute selectors.
  14. You should always try to use IDs to increase the specificity.
  15. A class selector beats any number of element selectors.
  16. The universal selector and inherited selectors have a specificity of 0, 0, 0, 0.
  17. You can calculate CSS specificity with CSS Specificity Calculator.

  18. What is Specificity?

    • Specificity determines, which CSS rule is applied by browsers. “Specificity is a type of weighting that has a bearing on how your cascading style sheet (CSS) rules are displayed.” [Understanding Specificity]
    • Selector specificity is a process used to determine which rules take precedence in CSS when several rules could be applied to the same element in markup. [Selector Specificity]
    • Every selector has its specificity. “All rules in your CSS carry a specificity rating regardless of selector type, although the weighting that is given to each selector type varies and will ultimately affect the styling of your web documents.” [Understanding Specificity]
    • If two selectors apply to the same element, the one with higher specificity wins.

    Specificity hierarchy

    • Every selector has its place in the specificity hierarchy. There are four distinct categories which define the specificity level of a given selector:1. Inline styles (Presence of style in document).
      An inline style lives within your XHTML document. It is attached directly to the element to be styled. E.g. <h1 style="color: #fff;">2. IDs (# of ID selectors)
      ID is an identifier for your page elements, such as #div.3. Classes, attributes and pseudo-classes (# of class selectors).
      This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
      4. Elements and pseudo-elements (# of Element (type) selectors).
      Including for instance :before and :after.
    If you don’t know what exactly each of these terms stands for, you can take a look at the brief overview of them; in the last section of this article.

    How to measure specificity?

    • Memorize how to measure specificity. “Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element. So in
      body #content .data img:hover
      the specificity value would be 122 (0,1,2,2 or 0122): 100 for #content, 10 for .data, 10 for :hover, 1 for body and 1 for img.” [CSS Specificity]
    • Alternative way: “Count the number of ID attributes in the selector (= a). Count the number of other attributes and pseudo-classes in the selector (= b). Count the number of element names and pseudo-elements in the selector (= c). Concatenating the three numbers a-b-c gives the specificity. [CSS Selector Specificity]
    • CSS Specificity Wars – Cheat Sheet
      To help me understand calculating specificity better I made a chart based on the following specificity (or Sith power) values. Each character (selector) is given its own Sith power (specificity value) depending on how powerful they are in the ways of the Dark Side. A storm trooper is less powerful than Vader who is in turn less powerful than the Emperor.

    • Specificity Example

      • Consider three code fragments:
        A: h1
B: #content h1
C: <div id="content">
<h1 style="color: #fff">Headline</h1>
</div>
        The specificity of A is 0,0,0,1 (one element), the specificity of B is 0,1,0,1 (one ID reference point and one element), the specificity value of C is 1,0,0,0, since it is an inline styling.
        Since
        0001 = 1 < 0101 = 101 < 1000,
        the third rule has a greater level of specificity, and therefore will be applied. If the third rule didn’t exist, the second rule would have been applied.