Kontakt aufnehmen

CSS: Pseudo-Klassen

Pseudo-Klassen sind Klassifizierungen, die einen Zustand oder eine Eigenschaft eines Elements beschreiben. Sie werden an den Elementnamen bzw. die vorhergehende Klassifizierung angehängt. In CSS Level 1 werden dabei 3 verschiedene Pseudo-Klassen beschrieben, die sich alle auf ein Element beziehen: A (Link/Anker).
In CSS Level 2 sind es dann schon 7.

:link

Die :link Pseudo-Klasse beschreibt ein A-Element (Link/Anker), wenn es sich dabei um einen Link und nicht um einen Anker handelt (also wenn es das href-Attribut enthält). Diese Klasse kann nur bei A-Elementen angewandt werden. Beispiel:

A:link { ... }
/* Alle Elemente A die ein Link sind */

:visited

Die :visited Pseudo-Klasse bezieht sich auf ein A-Element, wenn der Link bzw. das Dokument auf das er führt bereits besucht wurde. Diese Klasse kann nur bei A-Elementen angewandt werden. Beispiel:

A:visited { ... }
/*Alle Elemente A deren Zieldokument bereits besucht wurde*/

:active

Die :active Pseudo-Klasse beschreibt ein Element, wenn dieses aktiv ist. Nach CSS 1 darf diese Klasse nur bei A-Elementen angewandt werden - CSS Level 2 beschreibt sie jedoch für alle Elemente. Beispiel:

A:active { ... }
/*Alle Elemente A die gerade aktiv sind (CSS 1)*/

INPUT:active { ... }
/*Alle Elemente INPUT die gerade aktiv sind (CSS 2)*/

:hover

Die :hover Pseudo-Klasse bezieht sich auf ein Element, über dem sich die Maus befindet/über dem die Maus schwebt (engl. hover = schweben). Damit sind die sogenannten Hover-Effekte (z.B. Veränderung der Farbe eines Links, wenn ihn die Maus überfährt) möglich. Beispiel:

A:hover { ... }
/*Alle Elemente A über denen sich die Maus befindet (Hover-Effekt)*/

:focus

Die :focus Pseudo-Klasse beschreibt ein Element, das gerade den Fokus besitzt (beispielsweise ein markiertes Element oder ein Eingabefeld in das gerade eingegeben werden kann). Beispiel:

INPUT:focus { ... }
/*Alle Elemente INPUT die den Fokus besitzen*/

:lang()

Die Psuedo-Klasse :lang() bezieht sich auf die (definierte) Sprache eines Elementes. Diese Sprache muss dazu als Sprach-Code in den Klammern notiert werden. Beispiel:

P:lang(de) { ... }
/*Alle Elemente P mit deutscher Sprachdefinition*/

P:lang(en-US) { ... }
/*Alle Elemente P mit US-englischer Sprachdefinition*/

:first-child

Die Pseudo-Klasse :first-child beschreibt das Element, wenn es das erste "Kind" eines anderen Elements ist. Alle zweiten, dritten, vierten (usw.) "Kinder" werden somit ausgeklammert. Beispiel:

LI:first-child { ... }
/*Alle Elemente LI die das erste "Kind" eines Elementes sind.*/

<!-- in HTML: -->
<ul>
 <li>erstes Kind</li>
 <li>zweites Kind</li>
 <li>drittes Kind</li>
 ...
</ul>

:left und :right

Die Pseudo-Klassen :left und :right dienen der Definition von Dokumentvarianten bei denen ein Seitenumbruch stattfindet (z.B. beim Ausdruck des Dokumentes). :left und :right beschreiben dabei die Lage der Seite, also wie das Dokument aussehen soll, wenn es als rechte (:right) oder linke (:left) Seite ausgedruckt werden soll. Dies könnte z.B. dann eine Rolle spielen, wenn das Ausgedruckte Dokument abgeheftet werden soll - dann wäre es somit möglich beispielsweise immer auf der Seite des Blattes auf der das Blatt gelocht werden soll den Rand etwas weiter zu definieren, so dass erstens beim Lochen keine Buchstaben mit weggelocht werden und zweitens der andere Rand dennoch genau mit dem Blatt abschließt. Es sind aber auch andere Einsatzgebiete denkbar. Die folgende Grafik soll dies verdeutlichen:

Verwendung der Pseudo-Klassen :left und :right
Darstellung: Verwendung der Pseudo-Klassen :left und :right

Beispiel:

@page :left { margin-right:3cm; margin-left:2cm; }
@page :right { margin-right:2cm; margin-left:3cm; }

:first

:first beschreibt den Ausdruck bzw. die Darstellung der ersten Seite des Dokuments. So wäre es denkbar beispielsweise hier (auf der Ersten Seite) den Rand etwas breiter zu gestalten, sodass sich diese Seite optisch merklich von den anderen abhebt. Es sind aber auch andere Einsatzgebiete denkbar. Beispiel:

@page :first { margin: 25%; }

Verknüpfung

Wenn Pseudo-Klassen mit Elementen verknüpft werden, ist dies recht einfach (Elementname:Klasse). Bei weiteren Klassifizierungen des Elements ist darauf zu achten, dass die Pseudo-Klasse wiederum hinter der Klassifizierung zu stehen hat. Beispiel:

A#abc:active { ... }
/*Alle Elemente A der ID abc die aktiv sind*/

TABLE INPUT.def:focus { ... }
/*Alle Elemente INPUT die innerhalb eines Elements TABLE liegen,
  der Klasse def angehören und den Fokus besitzen*/

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Tabellen

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Cookie-Einstellungen

Helfen Sie dabei, uns noch besser zu machen. Wir nutzen Cookies und ähnliche Technologien, um die Website auf Ihre Bedürfnisse anzupassen. Zur Datenschutzerklärung

Auswahl speichern