CSS Pseudoklassen vs. Pseudo-Elemente

…oder: was sollen eigentlich die zwei Doppelpunkte in der Notation?

Sicher ist euch auch schon mal die eine oder andere CSS-Deklaration mit zwei Doppelpunkten anstatt einem aufgefallen. Es handelt sich hier nich um einen Tippfehler, sondern um die seit CSS3 gebräuchliche Schreibweise für Pseudo-Elemente.

Aber was ist eigentlich der Unterschied zwischen Pseudoklassen (a:link) und Pseudoelementen (li:before)?

Pseudoklassen beschreiben Elemente mit Eigenschaften, die nicht vom Document Tree abgeleitet werden können. Sie legen zusätzliche Bedingungen bei den selektierten Elementen fest, wodurch die Menge der zutreffenden Elemente reduziert wird. Pseudoklassen sind oft dynamisch, d.h. können durch User Interaktionen hinzukommen oder wegfallen (Ausnahmen hiervon sind :first-child und :lang). Das beste Beispiel hierfür ist die :hover-Pseudoklasse.

Mit Pseudo-Elementen dagegen kommt man an zusätzliche Informationseinheiten, die mit normalen Elementselektoren nicht zugänglich wären (z.B. :first-letter) oder im Document Tree eigentlich nicht existieren (z.B. :before).

Und warum nun die doppelten Doppelpunkte?

Vor CSS3 wurden alle diese Selektoren gleich behandelt, was die Notation angeht. Mit CSS3 sollen Pseudoklassen und Pseudoelemente nun leichter unterscheidbarer werden, weswegen letzteren nun zwei Doppelpunkte vorangestellt werden. Um Abwärtskompatibilität zu gewährleisten (IE8 und darunter verstehen diese Notation nicht), bedient man sich in der Praxis meistens nach wie vor der Notation mit einfachem Doppelpunkt.

Die mit CSS3 neu eingeführten Selektoren (z.B. ::selection) müssen jedoch mit zwei Doppelpunkten geschrieben werden.

Auf Sitepoint gibt’s mehr Infos und ausführliche Selektorenlisten zu Pseudoklassen und Pseudoelementen.

19.11.2012 ✭ Schlagwörter: Keine Kommentare

Ähnliche Artikel

    Keine ähnlichen Artikel gefunden.

Comments are closed.

Hallo, ich heiße Birgit Zimmermann und blogge hier über Webdesign und Webentwicklung, aber auch über persönliche Dinge. mehr Info…

Blog durchsuchen

Beliebte Artikel

Letzte Kommentare

Letzter Tweet

Im Moment kein Tweet. Sicher ist Twitter gerade überlastet.

Following:

Im Moment keine Follow-Liste. Vielleicht ist Twitter gerade überlastet ;)