1. 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

  2. Make your text beautiful with CSS3

    Styling web content with CSS3 properties can be quite a lot of fun.

    This is what you can get with as little as a custom embedded font, text-shadow, CSS rotation and some background gradients:

    Quite nice, huh?!

    If you want do do this kind of text styling, all you have to do is get acquainted with some of the newer CSS properties.

    21.05.2010 ✭ Schlagwörter: , Keine Kommentare

  3. CSS3 type

    A quote that’s styled only with CSS3. IE users, keep out :)

    21.05.2010 ✭ Schlagwörter: , Keine Kommentare

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 ;)