Berechnung der Spezifität

Peter Beauvain

2005-02-17 13:40

0 Kommentare

Die Spezifität kannst du leicht berechnen indem du eine Tabelle wie die
Folgende verwendest.

Zähle die Anzahl der ID-Attribute in dem Selektor und trage sie in die Spalte b ein.
Zähle die Anzahl der anderen Attribute und der Pseudoklassen in dem Selektor und trage sie in die Spalte c ein.
Zähle die Anzahl der Elementnamen und der Pseudoelemente in dem Selektor und trage sie in die Spalte d ein.
Das style-Attribut hat die höchste Spezifität und erhält immer den
Wert 1 in Spalte a

Daraus ergibt sich eine Zahl nach dem Schema:

a = 1000er-Stelle
b = 100er-Stelle
c = 10er-Stelle
d = 1er-Stelle

Selektor                 a     b    c    d   Spezifität

*                           0    0    0    0    0000

p                           0    0    0    1    0001

p:first-child             0    0    0    2    0002

div p                      0    0    0    2    0002

div p+span             0    0    0    3    0003

h1 + *[kap=index]  0    0    1    1    0011

div p span.red         0    0    1    3    0013

#name                   0    1    0    0    0100

style=""                  1    0    0    0    1000

Sehen wir uns die Zeile mit dem verschachteltetn Selektor div p pan.red
an. Der passende XHTML-Code würde so aussehen:





Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

Ein

-Tag in einem

-Container, das ein -Tag mit dem class-Attribut enthält.

In der Zeile stehen drei Elementnamen (

, ), die in die
Spalte d eingetragen werden, und ein Attribut (span.red steht für span [class=red], ein Tag mit dem Attribut class, das den Wert red enthält).
Also wird ein gefundenes Attribut in die Spalte c eingetragen.
Zusammengerechnet ergibt das 13.

Ein einfaches .red ist nur ein Attribut ohne Elementnamen, wird in die
Spalte c eingetragen und ergibt 10. Somit hat div p span.red eine höhere
Spezifität als .red. Das leuchtet auch ein, oder? Ein

-Tag in einem

-Container, das ein -Tag mit dem class-Attribut enthält, ist
nun mal genauer als ein einfaches class-Attribut mit dem Wert red.