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 {
...
}
Steuert jeweils die erste Zeile eines HTML-Elements. Beispielsweise könnte die erste Zeile in einem Textblock darüber eingerückt werden.
::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.
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.
::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]