Stil mit {stil}

Letztes Update Dez. 07

Pseudoklassen und Pseudoelemente

Pseudoklassen und Pseudoelemente sind im Grund genommen keine Stylesheet-Eigenschaften. Sie sind vielmehr Selektoren, die auf Elemente zugreifen, die es in HTML in dieser Form gar nicht gibt – darum auch die Bezeichnung "Pseudo...". Beispiele für Pseudoklassen sind "ein Hyperlink, über dem die Maus schwebt (hover)", "der erste Buchstabe eines Absatzes" oder "Angaben, die vor ein dynamisch erzeugtes Element gesetzt werden".

• :active :hover :link :visited :focus
• [ :first-child :first-line :first-letter ]
• :before :after

Pseudoelemente :first-child, :first-line, :first-letter

IE6 M1 N6 O5+ (nicht first-child) Sa1 CSS1/CSS2

:first-child, :first-line, :first-letter

sind für die Formatierung von Absätzen definiert. Sie greifen auf Teile von Elementen zu, die mit HTML nicht erreicht werden können (es gibt kein Tag für „die erste Zeile eines Absatzes“ oder „das erste Zeichen eines Absatzes“ oder „der erste Absatz innerhalb eines Containers“) und bilden Stilelemente des Drucks nach.

:first-child

formatiert das erste Vorkommen eines Elements in einem umfassenden Element, z.B. den ersten Absatz <p> in einem div-Container.

:first-line

formatiert die erste Zeile in einem Text.

:first-letter

formatiert den ersten Buchstaben eines Textes.

Beispiel: Texte formatieren

div.textbox { width: 400px; border: 1px solid silver; padding: 8px; }
div.textbox p { color: #666; text-indent: 2em; }
div.textbox p:first-child { font-weight: bold; text-indent: 0; }
div.textbox p:first-line { color: blue; }
div.textbox p:first-letter { font-size: x-large; color: red; font-family: serif; }

zurück zum Seitenanfang