Spezifität

Gerade am Anfang mit CSS wirst Du Dir bei komplexen Designs die Haare raufen. Warum wollen manche Eigenschaften einfach nicht funktionieren? Es gibt ein nicht ganz einfaches Prioritätensystem, welches erklärt, welche Selektoren vorranging behandelt werden.

Wo wird definiert

Es gibt verschiedene Stellen, an denen eine Eigenschaft definiert werden kann, und diese haben verschiedene Prioritäten.

  1. Im HTML (style=)
  2. Im <head>
  3. CSS-Datei
  4. Benuzter
    Der Benutzer kann Einstellungen im Browser machen.
  5. Browser
    Jeder Browser liefert ein Standarddesign mit.

Überschreiben

Wenn gleiche Eigenschaften an der gleichen Stelle mehrmals definiert werden, gilt jene, welcher später im Dokument erscheint. Im Beispiel haben alle Absätze grüne Schrift (rot wurde überschrieben).

p { color: red; }
p { color: green; }

Wenn mehrere Klassen angegeben werden, welche gleiche Eigenschaften verwenden, gillt die jeweils Letzte. Im Beispiel würden sich die gleichen Eigenschaften von "fette" durchsetzen.

<p class="schoen fette">
   Text mit zwei Klassen
</p>

Spezifität

Jetzt kommt der schwere Teil. Denn die verschiedenen Selektoren, haben auch unterschiedliche Prioritäten. Zunächst wurden vier verschiedene Selektorenbereiche festgelegt.

  1. Im HTML (style=)
  2. ID-Selektor 
  3. Klassen (Attribute & Pseudo-)
  4. Elemente (HTML & Pseudo-)

Da mehrere Selektoren kombiniert werden können, wird in diesem Fall gezählt, wieviele Selektoren in den vier Bereichen vorkommen.

Beispiel 1

div#meins > p.deins:hover { color: #000; }

Anzahl styles = 0
Anzahl ID-Selektoren = 1 (#meins)
Anzahl Klassen = 2 (.deins :hover)
Anzahl Elemente = 2 (div p)

Beispiel 2

div#meins > p.deins { color: black; }
p { color: red; }

Obwohl die Zweite Definition (p) danach vorgenommen wurde, ist der Text trotzdem schwarz. Es wird in der Spezifität von vorne geschaut, wo die meiste Anzahl pro Bereich vorkommt (also bei ID schon entschieden). 

style=# ID.Klasse<Element>
0112
0001

<div id="meins">
   <p class="deins">
      Text schwarz
   </p>
</div>

Anmerkung: In der CSS3 Spezifikation vom W3C wird die Spezifität in eine Zahl umgerechnet, indem die 4 Bereiche in der Reihenfolge mit dem Faktor 1000, 100, 10, 1 multipliziert werden, und dann alle Bereiche addiert werden. Das Beispiel 1 hätte somit eine Spezifität von 122 ( 0*1000 + 1*100 + 2*10 + 2*1).

!important

Wenn am Ende der Werte einer Eigenschaft "!important" angehangen wird, wird diese Eigenschaft auf die höchste Spezifität gesetzt. Also damit kann man die Spezifität umgehen, was aber wegen der Übersicht nicht empfehlenswert ist.

p { color: orange !important; }