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:
Darstellung: Verwendung der Pseudo-Klassen :left und :right
@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
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project