Diese Selektoren heißen »Pseudoklassen«, da sie kein statisches HTML steuern, sondern auf Informationen basieren, die vom Browser »geliefert« werden und damit beispielsweise das Benutzerverhalten schließen lassen. Wie zum Beispiel, ob ein Link bereits besucht wurde oder ob eine Checkbox aktiviert ist.
Andere Informationen vom Browser betreffen Aufbau der HTML-Struktur, so zum Bespiel, ob ein Listenpunkt der erste oder letzte in einer Liste ist, oder ob ein HTML-Element leer ist.
Alle Pseudoklassen beginnen mit einem :
(Doppelpunkt) und
folgen mit einem
festen Schlüsselwort, welches die Eigenschaft der Pseudoklasse
definiert. Diese
können mit einem Einfachselektor kombiniert werden und greifen
dann nur dort,
können aber auch eigenständig im CSS stehen, wirken sich
dann auf das komplette
HTML aus.
Eine Gruppe von Pseudoklassen sind die »dynamischen« Pseudoklassen, welche das Aussehen und Verhalten von Links steuern:
Pseudoklasse | Beschreibung |
---|---|
:link |
Steuert Links, die noch nicht angeklickt wurden. |
:visited |
Steuert Links, die bereits angeklickt wurden und damit in der Historie des Browser zu finden sind. |
:active |
Steuert den Link in dem Moment, wenn er von dem Benutzer angeklickt wird. |
:hover |
Steuert den Link, den der Benutzer mit der Maus überfährt. |
:focus |
Steuert den Link, an dessen Position sich der Benutzer beim "Tabben" befindet. |
Die Pseudoklasse :visited
ist dabei die
unzuverlässigste. Auch in vielen
modernen Browsern greift diese nur, wenn für dasselbe Element eine
:link
-Pseudoklasse vergeben wurde.
Ebenfalls sollte die Reihenfolge :link
, :visited
,
:hover
, :focus
, :active
eingehalten werden, da die einzelnen Zustände mit einander
»konkurrieren« und ein
:visited
hinter einem :hover
dieses deaktivieret.
Praxistipp
Ein :hover
weist Nutzer auf einen Link hin. Davon profitieren jedoch nur
Mausbenutzer. Definieren Sie eine solche Regel immer auch für die
Pseudoklasse :focus
, damit bedienen Sie Tastaturbenutzer in gleicher Weise
mit einer guten Usability!
CSS3 hat eine besondere Neuerung: Die Zielpseudoklasse oder Target-Pseudoklasse steuert die Sprungmarke, die über einen Sprunglink angesteuert wird und bietet damit die Möglichkeit, HTML-Elemente hervorzuheben in dem Moment, wo sie angesprungen werden.
Ebenfalls neu in CSS3 ist eine Sprachpseudoklasse. Mit dieser Pseudoklasse haben sie die Möglichkeit, die Sprache des ganzen Dokuments oder einzelner Bereiche zu erkennen.
Über den Selektor :lang
steuern Sie HTML-Elemente mit
einer bestimmten Sprachauszeichnung. Dabei kann
das lang
-Attribut für das Element
selber vergeben sein, aber auch eine geerbte
Spracheigenschaft mit dieser Pseudoklasse angesprochen.
Ein relevantes Beispiel aus der Praxis stellen Anführungszeichen dar: Im Deutschen werden für direkte Rede oder Zitate doppelte Anführungszeichen unten und oben „...“ verwendet, im Englischen doppelte Anführungszeichen nur oben “...“, im Französischen sogenannte Guillemets »...«. So können Sie über die Sprachpseudoklasse und über die CSS-Eigenschaft quotes die richtigen Anführungszeichen für die entsprechende Sprache setzen.
Ebenfalls neu in CSS3 sind Userinterface-Pseudoklassen. Darüber können Zustände der Formularelemente angesprochen werden und beispielsweise ein Eingabefeld, das über disabled für die Eingabe »gesperrt« ist, anders gestalten.
Userinterface-Pseudoklasse | Beschreibung |
---|---|
:enabled |
Steuert Formularfelder, in die Werte eingegeben werden können bzw. deren Bedienung möglich ist. |
:disabled |
Steuert Formularfelder, die über das Attribut
disabled für die
Eingabe gesperrt sind bzw. deren Bedienung nicht möglich ist. |
:checked |
Steuert Checkboxen oder Radioboxen, die aktiviert sind. |
Mit der im Englischen als »negation pseudo-class« bezeichneten Negationspseudoklasse erfüllt CSS3 einen Wunsch, den viele Frontendentwickler schon lange hatten. Nicht immer möchte man etwas konkret ansprechen, manchmal möchte man auch etwas ausschließen.
Negationspseudoklasse | Beschreibung | Code-Beispiel |
---|---|---|
:not(Element) |
Steuert alle Elemente außer dem Element, welches in der Klammer angegeben ist. | :not(Element) |