Besonderheit (Spezifität)
(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)
Für eine Stilregel ist es ausschlaggebender, wie spezifisch sie ein bestimmtes Element beschreibt, als wo sie im Dokument steht. In der Kaskade wird eine spezifische Stilregel immer einer allgemeineren vorgezogen. Wie bereits gesagt, sind Regeln, die für einen Absatz definiert wurden, weniger spezifisch als Regeln für einen Absatz der Klasse warnung.
Das folgende HTML-Fragment enthält zwei Stilregeln, die beide auf das p-Element der Klasse spezial zutreffen. Nach dem Kriterium der Ereignisabfolge müsste dieser Absatz eigentlich mit weißer Schrift auf blauem Hintergrund dargestellt werden. Der Text erscheint jedoch in roter Schrift auf weißem Hintergrund. Nicht etwa die letztgenannte, sondern die erstgenannte Stilregel kommt hier zum Einsatz. Sie ist der zweiten nach dem Kriterium der Besonderheit (oder Spezifität, engl. specificity) übergeordnet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Warnung</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
p.warnung {
color: red;
background-color: white;
}
.warnung {
color:yellow;
background-color: red;
}
p {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<p class="warnung">Dies ist eine Warnung.</p>
</body>
</html>Je genauer eine Stilregel in ihrem Selektor ein Element beschreibt, desto stärker wird sie priorisiert.
In unserem einfachen Beispiel ist das leicht nachvollziehbar. Bei etwas komplexeren Dokumenten ist es jedoch nicht möglich, einzelne Selektoren einfach miteinander zu vergleichen und daraus abzulesen, welcher zur Anwendung kommt.
Die Besonderheit eines Selektors spiegelt sich in ihrem Spezifitätsgrad wider. Dieser wird in der CSS-Spezifikation mit der folgenden Formel berechnet:
(100 x IDWerte) + (10 x WeitereTypen) + BezeichneteElemente
Diese Formel simuliert den Algorithmus, mit dem ein Browser bestimmt, welche Spezifität ein Selektor besitzt. Sie besteht aus der Summe dieser drei Komponenten:
- Die Summe der ID-Selektoren (zum Beispiel #spezial) in der Stilregel, multipliziert mit dem Faktor 100.
- Die Summe anderer spezifischer Selektoren (zum Beispiel Klassen oder Pseudoklassen, aber nicht Pseudo-Elemente), multipliziert mit dem Faktor 10.
- Die Anzahl der bezeichneten Elemente (z. B. p oder div).
- Addieren Sie nun alle diese Werte zusammen.
Die folgende Tabelle enthält verschiedene Beispiele für Selektoren und führt ihre nach dieser Formel errechneten Spezifitätsgrade auf.
Von dieser Formal ausgenommen sind Stileigenschaften, die intern mit dem HTML-Attribut style deklariert werden. Sie werden nach dem Prinzip der Spezifität immer priorisiert, da sie naturgemäß nur für ein spezifisches Element angewendet werden. Keine andere externe oder eingebettete Stilregel kann eine interne Stileigenschaft überschreiben.
Bei zwei oder mehreren konkurrierenden Stilregeln, die sich auf ein Element beziehen, wird immer die mit dem höheren Spezifitätsgrad angewendet – natürlich nur unter der Voraussetzung, dass keine Unterschiede hinsichtlich der wichtigeren Auswahlkriterien Herkunft und Gewichtung bestehen.
Der Spezifitätsgrad in der letzten Spalte ist kein endgültiger Wert. Beispielsweise würden 11 Klassen keine ID übertreffen. Denken Sie dabei einfach an den Medaillenspiegel bei der Olympiade: Ein Land mit einer einzigen Goldmedaille steht weiter oben als ein Land mit elf Silbermedaillen.
Tabelle: Ausgewählte CSS-Selektoren, geordnet nach ihrem Spezifitätsgrad.
| Selektor | IDs | Klassen | Elemente | Spezifitätsgrad |
|---|---|---|---|---|
| em | 0 | 0 | 1 | 1 |
| p em | 0 | 0 | 2 | 2 |
| .critical | 0 | 1 | 0 | 10 |
| a:hover | 0 | 1 | 1 | 11 |
| div p span.critical | 0 | 1 | 3 | 13 |
| #critical | 1 | 0 | 0 | 100 |
| p#critical | 1 | 0 | 1 | 101 |
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg