Advanced CSS - Spezifität - Elementkoppelung
1. Bindung an ein HTML-Element
Es sollte euch ja bekannt sein, dass man eine CSS-Anweisung auch an den Typ des anzusteuernden Elements binden kann. Das sieht dann zum Beispiel so aus (und wurde im zweiten Praxistutorial auch ausführlich gezeigt):
div.rahmen { ... }
div#aussen { ... }
div.info a.pdf { ... }
2. Und wie wirkt hier die Spezifität?
Ganz einfach, die zusätzliche Angabe des HTML-Elements wird bei dem "D" dazu gezählt. Nehmen wir mal ein Beispiel aus dem vorherigen
Abschnitt, in diesem Fall das #blubber .blubb #bla li a. Die normale Berechnung sah dort so aus:
| Selektor | A | B | C | D | Wertigkeit |
|---|---|---|---|---|---|
| #blubber .blubb #bla li | 0 | 2 | 1 | 1 | 0 - 2 - 1 - 1 |
Wenn man nun die ID- und Klassen-Selektoren zusätzlich an ein HTML-Element bindet, so könnte das dann zum Beispiel so aussehen:
div#blubber div.blubb ul#bla li. Daraus ergäbe sich dann folgendes Ergebnis:
| Selektor | A | B | C | D | Wertigkeit |
|---|---|---|---|---|---|
| div#blubber div.blubb ul#bla li | 0 | 2 | 1 | 4 | 0 - 2 - 1 - 4 |
Erläuterung
Sofort fällt dem geübten Betrachter auf, dass sich im Gegensatz zum ersten Beispiel nur ein Wert geändert hat, nämlich der beim "D". Das
ist auch ganz einfach zu erklären. Wie ich schon oben sagte, wirkt sich diese Bindung nur auf die Zählweise beim Typen-Selektor aus.
Wir haben also drei zusätzliche(!) Werte (zwei div und ein ul), die wir auf das bereits existierende
li aufaddieren. Und das ergibt dann die die 4.
Ganz einfach
Wem das zu kompliziert ist, dem gebe ich hier noch ein ganz einfaches Beispiel. Also Alda, passt du voll krass auf und guckst dir das total konkret an. Auf dass dein Herz und Hirn erleuchtet werde von der Weisheit, die uns die Macht ... äh sorry, Spezifität bietet.
| Selektor | A | B | C | D | Wertigkeit |
|---|---|---|---|---|---|
| #bla a | 0 | 1 | 0 | 1 | 0 - 1 - 0 - 1 |
| ul#bla a.blubber | 0 | 1 | 1 | 2 | 0 - 1 - 1 - 2 |
3. Schlussfolgerung
Eine zusätzliche Typenbindung erhöht auf der einen Seite die Genauigkeit, reduziert aber auf der anderen Seite die Flexibilität. Und genau da fangen die Probleme an. Soll man nun Deklarationen mit Bindung an die jeweiligen HTML-Elemente nutzen oder nicht? Das ist eine gute Frage, aber eine eindeutige Antwort darauf gibt es leider nicht. Darum habe ich zu diesem Thema auch einen eigenen Abschnitt eingebaut, wo ich auf dieses Problem eingehen werde.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt