IMHO SPECIFICITY is a ugly word for saying “priority” of a css property.

usually the last css rule overwrites the first ones.

            #divisor {
                max-width: 100%;
                background-color: red;
                height: 50px;
            }
            .divisor {
                max-width: 100%;
                height: 50px;
                background-color: blue;
            }
<div id="divisor" class="divisor"> Requirements:</div>

but #elementID { background-color: red; } will overwrite .element { background-color: blue; } even if#elementID is the last css rule affecting background-color.

but to add to the confusion… there is also

  specificity     die Ausprägung  Pl.: die Ausprägungen
      specificity     die Genauigkeit  kein Pl.
      specificity   spezifische Wirksamkeit
      specificity     die Spezifität  Pl.: die Spezifitäten
      specificity   die Exaktheitsquote   [Dokumentation]

2.1 HOW TO CALCULATE SPECIFICITY?

There are several ways to calculate a selector’s specificity.

The quickest way is to do the following. Add 1 for each element and pseudo-element (for example,

:before

and

:after

); add 10 for each attribute (for example,

[type="text"]

), class and pseudo-class (for example,

:link

or

:hover

); add 100 for each ID; and add 1000 for an inline style.

Let’s calculate the specificity of the following selectors using this method:

  • <strong>p.note</strong>

    1 class + 1 element = 11

  • <strong>#sidebar p[lang="en"]</strong>

    1 ID + 1 attribute + 1 element = 111

  • <strong>body #main .post ul li:last-child</strong>

    1 ID + 1 class + 1 pseudo-class + 3 elements = 123

A similar method, described in the W3C’s specifications, is to start with a=0, b=0, c=0 and d=0 and replace the numbers accordingly:

  • a = 1 if the style is inline,
  • b = the number of IDs,
  • c = the number of attribute selectors, classes and pseudo-classes,
  • d = the number of element names and pseudo-elements.

Let’s calculate the specificity of another set of selectors:

  • <strong>&lt;p style="color:#000000;"&gt;</strong>

    a=1, b=0, c=0, d=0 → 1000

  • <strong>footer nav li:last-child</strong>

    a=0, b=0, c=1, d=3 → 0013

  • <strong>#sidebar input:not([type="submit"])</strong>

    a=0, b=1, c=1, d=1 → 0111
    (Note that the negation pseudo-class doesn’t count, but the selector inside it does.)

admin