Pseudoklassen in CSS
Einige weitere interessante Möglichkeiten zur Formatierung bieten die Selektoren aus der Gruppe der Pseudoklassen. Damit werden Elemente angesprochen, bei denen die Eigenschaften nicht aus der Dokumentenstruktur abgeleitet werden können, sondern außerhalb liegen. Ein typisches Beispiel ist die Formatierung von Elementen, auf die mit dem Mauszeiger gezeigt wird und Hover-Effekt genannt wird. Die zugrundeliegende Information dazu, nämlich dass der Mauszeiger über einem Element steht, ist nicht aus der HTML-Struktur zu entnehmen. Außerdem kategorisiert man Selektoren zu den Pseudoklassen, wenn damit Elemente anhand von Informationen angesprochen werden, die man mit anderen Selektoren nicht ausdrücken kann. Die folgenden Pseudoklassen können in CSS-Regeln verwendet werden.
Ab CSS3
Neben diesen gibt es noch die UI Elementstatus Pseudoklassen und Strukturpseudoklassen. Es könnten außerdem weitere Pseudoklassen zu den Spezifikationen hinzukommen.
Schreibweise der Pseudoklassen
Vor CSS3 wurden Pseudoklassen und Pseudoelemente mit einem einfachen Doppelpunkt geschrieben. Ab CSS3 erfolgt eine Unterscheidung und die Schreibweise mit einem einfachen Doppelpunkt wurde bei Pseudoklassen beibehalten. Die Einfachselektoren, die in der Regel den Pseudoelementen vorangestellt werden, um die Anwendung auf bestimmte Elemente zu beschränken, können mit Kombinatoren auch kombiniert werden.
Link Pseudoklasse
Die Link Pseudoklasse ist dafür gedacht, um Hyperlinks zu formatieren, die noch nicht angeklickt wurden. Beispielsweise kann man den Links eine andere Farbe zuweisen. Da für das Setzen von Links der A-Tag verwendet wird, sind die Auswirkungen im Grunde auf den A-Tag beschränkt. Das könnte sich vielleicht irgendwann ändern, wenn auch anderen Elementen das Attribut href="..." zugewiesen werden könnte. Wird dem A-Tag kein Attribut href="..." zugewiesen, wird die CSS-Regel nicht angewendet.
Wenn die Stile auf alle Hyperlinks angewendet werden soll, reicht ein Code in folgender Form. Ein Beispiel, um allen Links eine rote Schriftfarbe zuzuweisen.
:link { color: red; }
/* oder */
a:link { color: red; }Wenn die CSS-Regel nicht auf alle Hyperlinks angewendet werden soll, kann man auch andere Einfachselektoren angeben, um die Zuweisung auf bestimmte Hyperlinks zu beschränken. Einige Beispiele.
.klasse:link { color: red; }
#id-bezeichnung:link { color: red; }
[title]:link { color: red; }Visited Pseudoklasse
Die Link Pseudoklasse dient dazu, um Hyperlinks zu formatieren, die bereits angeklickt wurden. Das funktioniert jedoch nicht immer. Häufig funktioniert das nur, wenn dem Element zusätzlich die Link Pseudoklasse zugewiesen wurde.
Ein Beispielcode, um allen besuchten Hyperlinks eine CSS-Regel zuzuweisen.
:visited { color: red; }
/* oder */
a:visited { color: red; }Möchte man, dass die CSS-Regel nicht auf alle Links angewendet wird, kann man die Pseudoklasse mit weiteren Einfachselektoren verknüpfen. Einige Beispiele.
.klasse:visited { color: red; }
#id-bezeichnung:visited { color: red; }
[title]:visited { color: red; }Hover Pseudoklasse
Die Hover Pseudoklasse wird zwar häufig auf Hyperlinks angewendet, kann jedoch im Grunde auch auf andere HTML-Elemente angewendet werden. Damit kann das Element formatiert werden, auf das der Mauszeiger zeigt.
Da der Hover-Effekt auch auf andere Elemente angewendet werden kann, wird es gewöhnlich mit einem Einfachselektor verknüpft, damit nur diese Bereiche mit einem Hover-Effekt versehen werden. Einige Beispiele mit Einfachselektoren, um den Elementen beim Zeigen mit der Maus (Mouseover) einen Hover-Effekt mit roter Schriftfarbe zuzuweisen.
a:hover { color: red; }
.klasse:hover { color: red; }
#id-bezeichnung:hover { color: red; }
[title]:hover { color: red; }
Focus Pseudoklasse
Auf Websites kann man mit der TAB-Taste von einem Element zum anderen springen. Dabei hat das Element, das grade markiert wurde, den Status Focus. Mit der Focus Pseudoklasse kann es formatiert werden. Häufig wird es identisch wie die Hover Pseudoklasse gehalten, damit Mausbenutzer und Tastaturbenutzer dieselbe Formatierung beim markierten bzw. mit dem Mauszeiger angezeigten Element haben.
Auch die Focus Pseudoklasse wird gewöhnlich mit einem Einfachselektor verknüpft. Einige Beispiele.
a:focus { color: red; }
.klasse:focus { color: red; }
#id-bezeichnung:focus { color: red; }
[title]:focus { color: red; }Active Pseudoklasse
Mit der Active Pseudoklasse wird der Moment beim Anklicken eines Mausklicks angesprochen. Das ist ein sehr kurzer Moment und der Effekt ist daher häufig nicht ersichtlich. Möchte man den Hyperlinks in diesem Moment ein CSS-Stil zuweisen, kann man diese Pseudoklasse verwenden.
Die Active Pseudoklasse wird in der Regel ebenfalls mit einem Einfachselektor verknüpft. Einige Beispiele.
a:active { color: red; }
.klasse:active { color: red; }
#id-bezeichnung:active { color: red; }
[title]:active { color: red; }Wichtig beim Definieren der CSS-Regel ist, dass man sie in der Reihenfolge :link, :visited, :hover, :focus und :active einträgt. Sonst könnte es passieren, dass eine Regel eine andere aufhebt.
Target Pseudoklasse
Die Target Pseudoklasse hat eine Bedeutung bei internen Links. Auf Websites können Sprungmarken definiert werden, die mit internen Hyperlinks angesprungen werden können. Mit der Target Pseudoklasse können solche Sprungmarken in dem Moment formatiert werden, in dem der interne Link aufgerufen wird. Das kann z.B. bei sehr großen Seiten mit vielen internen Links nützlich sein, um den relevanten Bereich direkt nach dem Mausklick hervorzuheben.
Wenn man die CSS-Regel allen Sprungmarken zuweisen möchte, kann man z.B. folgenden Code für rote Schriftfarbe verwenden.
:target { color: red; }Um die CSS-Regel nur auf bestimmte Elemente anzuwenden, kann man die Pseudoklasse mit Einfachselektoren verknüpfen. Einige Beispiele, um die Sprungmarken mit roter Schrift darzustellen.
a:target { color: red; }
.klasse:target { color: red; }
#id-bezeichnung:target { color: red; }
[title]:target { color: red; }Die Target Pseudoklasse kann nicht nur für die Formatierung des Designs verwendet werden. Man könnte damit auch ausgeblendete Elemente einblenden. Hierfür wird das Element, in diesem Beispiel ein DIV-Container, initial ausgeblendet.
div#id-bezeichnung { display: none; }Damit der DIV-Container bei einem Mausklick eingeblendet wird, könnte man folgenden Code verwenden.
div#id-bezeichnung:target { display: block; }Lang Pseudoklasse
HTML-Elemente kann man mit dem Attribut lang="..." mit einer Sprache auszeichnen, z.B. lang="de" für Deutsch. Das war bereits vor HTML5 möglich. Jedoch gab es dabei gewisse Einschränkungen, die mit HTML5 aufgehoben wurden und man kann das Sprachattribut allen Elementen zuweisen. Mit der Lang Pseudoklasse kann man die Formatierung von der Sprachauszeichnung abhängig machen. Beispielsweise verwendet man im englischsprachigen Raum andere Anführungszeichen als in Deutschland. Für solche Fälle kann man die Pseudoklasse verwenden. Das Sprachkürzel wird gemäß der IANA-Sprachdefinitionen innerhalb der runden Klammern eingegeben. Innerhalb der geschweiften Klammern erfolgt die Angabe der Eigenschaften und Werte für die Formatierung.
Zitate können z.B. mit dem Q-Tag angegeben werden. Um bei Q-Tags mit der englischen Sprachauszeichnung die entsprechenden Anführungszeichen festzulegen, könnte man folgenden CSS-Code verwenden.
q:lang(en) { quotes: '"' '"' "'" "'" }Die Verwendung anderer Einfachselektoren ist hier ebenfalls möglich.
Not Pseudoklasse
Mit der Not Pseudoklasse können Elemente mit einem logischen "Nicht" angesprochen werden.
Das negierte Element wird innerhalb der runden Klammern angegeben. Die Formatierung erfolgt innerhalb der geschweiften Klammern. Allerdings muss man hierbei die Kaskadierung und das Verhältnis zwischen Inline-und Block-Elementen beachten. Wenn man z.B. außer den Absätzen allen Elementen eine gelbe Hintergrundfarbe und eine rote Schrift zuweisen möchte, könnte man das mit folgendem CSS-Code probieren.
:not(p) { background: yellow; color: red; }Durch die Kaskadierung hätte der Code keine Auswirkung und alle Absätze würden trotzdem mit gelber Hintergrundfarbe und roter Schriftfarbe dargestellt werden. Um die Elemente gezielter anzusprechen, kann man Kombinatoren verwenden. Wenn man davon ausgeht, dass alle Absätze auf einer Ebene mit der Überschrift 1 sind, könnte man dagegen folgenden Code verwenden.
h1 ~ :not(p) { background: yellow; color: red; }Mit dem Code werden die Absätze, die sich auf derselben Ebene wie die Überschrift 1 befinden, von der CSS-Regel ausgenommen. Mit Kombinatoren und Einfachselektoren lassen sich Elemente gezielter ansprechen.