CSS Pseudo-Klassen

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]

Bewerte diese Seite

 
 
 
 
 
 
 
Bewerten
 
 
 
 
 
 
0 Bewertungen
0 %
1
5
0
 

Veröffentlicht von

Kevin Lieser

Kevin Lieser

Kevin Lieser ist ausgebildeter Mediendesigner und seit 2008 mit der TYPO3 Agentur KA Mediendesign unternehmerisch tätig. Seine Leidenschaften sind gutes Webdesign und die PHP Programmierung. Als App Entwickler und Autor mehrerer TYPO3 Extensions engagiert er sich aktiv für die Weiterentwicklung von Webapplikationen und mobilen Anwendungen.