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

usually the last css rule overwrites the first ones.

[cc lang=”css” escaped=”true” width=”500″]
#divisor {
max-width: 100%;
background-color: red;
height: 50px;
}
.divisor {
max-width: 100%;
height: 50px;
background-color: blue;
}
[/cc]

[cc lang=”html” escaped=”true” width=”500″]

Requirements:

[/cc]

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:

  • p.note
    1 class + 1 element = 11
  • #sidebar p[lang="en"]
    1 ID + 1 attribute + 1 element = 111
  • body #main .post ul li:last-child
    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:

  • <p style="color:#000000;">
    a=1, b=0, c=0, d=0 → 1000
  • footer nav li:last-child
    a=0, b=0, c=1, d=3 → 0013
  • #sidebar input:not([type="submit"])
    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