Der eigene Onlineshop für Fotografen

Workshop HTML5 & CSS3 - Stephan Heller

Der Beitrag "Alle CSS3 Selektoren im Detail" besteht aus fünf Seiten

Pseudoelemente (Pseudo-elements) - Alle CSS3 Selektoren im Detail

Eine weitere Gruppe der Selektoren stellen Pseudoelemente dar. Vergleichbar zu Pseudoattributen werden hiermit Elemente angesprochen, die als solche nicht in der HTML-Struktur vorhanden sind, sondern die sich entweder durch den Aufbau im HTML ergeben oder die über die CSS-Eigenschaft content »generiert« werden.

Alle vier Pseudoelemente haben die gleiche Schreibweise, sie beginnen mit einem zweifachen :: (Doppelpunkt), woran sich das festgelegte Schlüsselwort anschließt.

first-line Pseudoelement (::first-line pseudo-element)

::first-line {
   ...
}

Steuert jeweils die erste Zeile eines HTML-Elements. Beispielsweise könnte die erste Zeile in einem Textblock darüber eingerückt werden.

first-letter Pseudoelement (::first-letter pseudo-element)

::first-letter {
   ...
}

Steuert das erste Zeichen in einem Textblock. Eine mögliche Anwendung könnte ein sehr großer Buchstabe sein, wie es auch in Märchenbüchern oder Zeitschriften üblich ist.

before und after Pseudoelement (::before and ::after pseudo-elements)

p::before {
   ...
}
p::after {
   ...
}

Diese Pseudoelemente steuern »generierten Content«. Das sind Elemente in der Darstellung, die nicht im HTML vorhanden sind, sondern über die CSS-Eigenschaft content erzeugt werden.

Die CSS-Eigenschaft content ist umfassend und mit vielen Beispielen auf CSS-Wiki.com - CSS-Eigenschaft content beschrieben.

Praxishinweis:
Generell sollte beim Einsatz der CSS-Eigenschaft content gelten: Solange Inhalte relevant sind, sollten diese auch im HTML selber zu finden sein. »Generierter Content« kann dann eingesetzt werden, wenn dieser ausschließlich zu Layoutzwecken dient und kein Informationsgehalt damit verloren geht.

Ein Beispiel für generierten Content ist ein sogenanntes clearfix, das eingesetzt wird, um Layouts zu stabilisieren. Dies ist ausführlich unter float auflösen: clearfix beschrieben.

CSS 2.1 / CSS 3 Versionshinweis

::before und ::after stellen eine der wenigen Ausnahmen dar, wo CSS 2.1 nicht genau in den CSS3-Standard übernommen wird. Wo diese Pseudoelemente früher mit einem : (Doppelpunkt) geschrieben wurden, definiert CSS3 die Notation mit doppelten ::. Da aktuelle Browser die alte Schreibweise unterstützen, können Sie beide Varianten verwenden.

Weitere Seiten des Beitrags "Alle CSS3 Selektoren im Detail":

© 2013 - Stephan Heller [daik.de]

Buchempfehlungen