Mit CSS Pseudo-Klassen lassen sich Elemente in Ihren Positionen oder Eigenschaften ohne zusätzliche CSS Klassen ansprechen. Wir nutzen also die Möglichkeiten des Browsers oder Positionen des Elements im HTML Markup. So lassen sich – zumindest in modernen Browsern – ganz einfach entsprechende Elemente selektieren und Style-Angabe definieren.
Eigenschaften Pseudo-Klassen
:hover
Durch die :hover Pseudo-Klasse lässt sich ein Mouse-Over Effekt nutzen. Mit diesem CSS Befehl werden oft Links beim Überfahren mit der Maus optisch anders dargestellt. Modifizieren lassen sich unter anderem Farbe und Unterstreichen. In modernen Browsern wird diese Pseudo-Klasse auch auf normalen, nicht Link-Elementen berücksichtigt. Somit können wir via CSS3 eine ganze aufklappbare Navigation erstellen (:hover & display).
:visited
Mit der CSS Pseudo-Klasse :visited lässt sich bereits besuchter Link grafisch anders darstellen und signalisiert so dem Besucher, dass er diese Seite bereits besucht hat.
:active
Die Pseudo-Klasse :active ermöglicht es, Links auf der aktuell geöffneten Seite anders darzustellen.
Positions Pseudo-Klassen
:first-child
Mit :first-child werden Elemente selektiert und angesprochen die nach dem entsprechenden Muster das erste „Kind-Element“ darstellen.
:last-child
Last-Child funktioniert genau wie First Child, jedoch wird hierbei das letzte Kind-Element der entsprechenden Selektion angesprochen.
:first-line
Fügt Style-Definitionen auf die erste Textzeile des selektierten Elements hinzu.
:first-letter
Mit First-Letter kann man das Aussehen des ersten Zeichens eines Elements anpassen.
:nth-child( <odd/even/Zahl> )
Mit der Pseudo-Klasse :nth-child lassen sich alle gerade bzw. ungeraden Elemente ansprechen. Ein einfaches Anwedungsbeispiel wären Tabellenzeilen oder Listen. So könnte man jede zweite Zeile mit einer leicht anderen Farbe hinterlegen. Auch ist es möglich dort z.B. jedes dritte Element (3n) anzusprechen. Zusätzlich ist es möglich jedes dritte Element – jedoch erst ab dem zweiten Element – anzusprechen (3n+2).
Wert Pseudo-Klassen
[attr=value]
Ebenfalls können wir Elemente direkt nach Attributen und entsprechenden Werten selektieren. Ein einfaches Beispiel: Wir selektieren alle Input-Felder vom Typ „Submit“: input[type=submit]
