Hauptmenü

Untermenü

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-transformnone;
}
div.bla p:first-letter
{
  text-transformuppercase;
}

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