Advanced CSS - Spezifität - Pseudoklassen
1. Der feine Unterschied
Wie ich schon zu Beginn bemerkte, werden Pseudoklassen beim "C", also dem class
hinzugezählt,
während man Pseudoelemente beim "D", also dem Typ-Selektor (die HTML-Elemente) aufaddiert.
2. Pseudoklassen
ul li a
{
color: #00f;
}
ul li a:hover
{
color: #f00;
}
Hieraus ergibt sich eine einfache Berechnung, wobei das :hover
, einfach ausgedrückt, als Klasse gewertet wird, und somit für
die 1
beim "C" verantwortlich ist. Darum heißt es wahrscheinlich auch Pseudoklasse.
Selektor | A | B | C | D | Wertigkeit |
---|---|---|---|---|---|
ul li a | 0 | 0 | 0 | 3 | 0 - 0 - 0 - 3 |
ul li a:hover | 0 | 0 | 1 | 3 | 0 - 0 - 1 - 3 |
OK, das Beispiel ist ziemlicher Müll, da diese Pseudoklassen immer an einen Zustand gebunden sind. Sie stellen auch eine Art von Ergänzung dar und haben somit immer eine vorgegebene Eigenschaft.
3. Pseudoelemente
Auch hier gilt dasselbe wie bei den Pseudoklassen. Denn Pseudoelemente stellen ebenfalls eine Ergänzung dar. Ich zeig es euch trotzdem, damit ihr hier die Zählweise versteht. Gilt auch für obiges Beispiel.
div.bla p
{
text-transform: none;
}
div.bla p:first-letter
{
text-transform: uppercase;
}
Selektor | A | B | C | D | Wertigkeit |
---|---|---|---|---|---|
div.bla p | 0 | 0 | 1 | 2 | 0 - 0 - 1 - 2 |
div.bla p:first-letter | 0 | 0 | 1 | 3 | 0 - 0 - 1 - 3 |
4. Obacht!
Entscheidend ist auch hier mal wieder die "Tiefe", also der Nachfolge-Selektor. Bei folgendem Beispiel hätten wir eine Gleichwertigkeit (fürchterliches Wort) und es gewänne mal wieder die letzte Deklaration. Und nicht "es würde gewinnen"!
div p.blubb:first-letter
{
color: #00f;
}
div.bla p:first-letter
{
color: #f00;
}
Selektor | A | B | C | D | Wertigkeit |
---|---|---|---|---|---|
div p.blubb:first-letter | 0 | 0 | 1 | 3 | 0 - 0 - 1 - 3 |
div.bla p:first-letter | 0 | 0 | 1 | 3 | 0 - 0 - 1 - 3 |
Ein kleiner Hinweis bevor hier jemand dumme Fragen stellt. first-letter
ist ein Pseudoelement(!). Das man übrigens auch
nur auf originäre Blockelemente anwenden kann. Ein
a:first-letter
{
color: #ff0;
}
bringt gar nichts! Selbst bei einem display: block
nicht.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt