CSS Pseudoklassen
CSS-Pseudoklassen werden verwendet, um einigen Selektoren spezielle Effekte hinzuzufügen.
Syntax
Pseudoklassen-Syntax
CSS-Klassen können auch Pseudoklassen verwenden:
Anker-Pseudoklassen
In Browsern, die CSS unterstützen, können verschiedene Zustände von Links auf unterschiedliche Weise dargestellt werden.
Beispiel
Selbst ausprobieren »
Hinweis:In CSS-Definitionen muss a:hover nach a:link und a:visited stehen, um gültig zu sein.
Hinweis:In CSS-Definitionen muss a:active nach a:hover stehen, um gültig zu sein.
Hinweis:Die Namen von Pseudoklassen sind unabhängig von Groß- und Kleinschreibung.
Pseudoklassen und CSS-Klassen
Pseudoklassen können zusammen mit CSS-Klassen verwendet werden:
Wenn der Link im obigen Beispiel bereits besucht wurde, wird er rot angezeigt.
CSS :first-child Pseudoklasse
Sie können die Pseudoklasse :first-child verwenden, um das erste Kindelement eines Elternelements auszuwählen.
Hinweis:Muss in Versionen vor IE8 deklariert werden<!DOCTYPE>, damit :first-child wirksam wird.
Trifft auf das erste <p>-Element zu
Im folgenden Beispiel trifft der Selektor auf <p>-Elemente zu, die das erste Kind eines beliebigen Elements sind:
Trifft auf das erste <i>-Element in allen <p>-Elementen zu.
Im folgenden Beispiel stimmt der Selektor mit dem ersten <i>-Element in allen <p>-Elementen überein:
Trifft auf alle <i>-Elemente in <p>-Elementen zu, die das erste Kind sind.
Im folgenden Beispiel stimmt der Selektor mit allen <i>-Elementen in <p>-Elementen überein, die das erste Kind eines Elements sind:
CSS - :lang Pseudoklasse
Die :lang-Pseudoklasse gibt Ihnen die Möglichkeit, spezielle Regeln für verschiedene Sprachen zu definieren.
Hinweis:IE8 muss<!DOCTYPE> deklarieren, um die :lang-Pseudoklasse zu unterstützen.
Im folgenden Beispiel definiert die :lang-Klasse den Typ der Anführungszeichen für q-Elemente mit einem Attributwert von no:
Weitere Beispiele
Verschiedene Stile zu Hyperlinks hinzufügen
Dieses Beispiel zeigt, wie man zu Hyperlinks andere Stile hinzufügt.
Verwendung von :focus
Dieses Beispiel zeigt, wie man die :focus-Pseudoklasse verwendet.
Alle CSS-Pseudoklassen/-elemente
| Selektor | Beispiel | Beispielbeschreibung |
|---|---|---|
| :checked | input:checked | Wählt alle ausgewählten Formularelemente aus |
| :disabled | input:disabled | Wählt alle deaktivierten Formularelemente aus |
| :empty | p:empty | Wählt alle <p>-Elemente ohne untergeordnete Elemente aus |
| :enabled | input:enabled | Wählt alle aktivierten Formularelemente aus |
| :first-of-type | p:first-of-type | Wählt jedes p-Element aus, das das erste p-Element seines Elternelements ist. |
| :in-range | input:in-range | Wählt Werte innerhalb eines angegebenen Bereichs von Elementen aus |
| :invalid | input:invalid | Wählt alle ungültigen Elemente aus |
| :last-child | p:last-child | Wählt das letzte Kindelement aller p-Elemente aus. |
| :last-of-type | p:last-of-type | Wählt jedes p-Element aus, das das letzte p-Element seines Elternelements ist. |
| :not(selector) | :not(p) | Wählt alle Elemente außer <p> aus |
| :nth-child(n) | p:nth-child(2) | Wählt das zweite Kindelement des Elternelements aller p-Elemente aus. |
| :nth-last-child(n) | p:nth-last-child(2) | Wählt das vorletzte Kindelement aller p-Elemente aus. |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Wählt das vorletzte p-Kindelement aller p-Elemente aus. |
| :nth-of-type(n) | p:nth-of-type(2) | Wählt das zweite p-Kindelement aller p-Elemente aus. |
| :only-of-type | p:only-of-type | Wählt alle Elemente aus, die nur ein Kindelement haben, das ein p-Element ist. |
| :only-child | p:only-child | Wählt alle p-Elemente aus, die nur ein Kindelement haben. |
| :optional | input:optional | Wählt Elementattribute ohne "required" aus. |
| :out-of-range | input:out-of-range | Wählt Elementattribute aus, deren Wert außerhalb des angegebenen Bereichs liegt. |
| :read-only | input:read-only | Wählt Elemente mit einem schreibgeschützten Attribut aus. |
| :read-write | input:read-write | Wählt Elemente ohne ein schreibgeschütztes Attribut aus |
| :required | input:required | Wählt Elementattribute aus, bei denen das Attribut "required" angegeben ist. |
| :root | root | Wählt das Wurzelelement des Dokuments aus |
| :target | #news:target | Wählt das aktuell aktive #news-Element aus (wenn die angeklickte URL den Ankernamen enthält). |
| :valid | input:valid | Wählt alle Attribute mit gültigen Werten aus |
| :link | a:link | Wählt alle unbesuchten Links aus |
| :visited | a:visited | Wählt alle besuchten Links aus |
| :active | a:active | Wählt den aktiven Link aus |
| :hover | a:hover | Der Zustand, wenn der Mauszeiger über einem Link schwebt |
| :focus | input:focus | Wählt Elemente aus, die nach der Eingabe den Fokus haben |
| :first-letter | p:first-letter | Wählt den ersten Buchstaben jedes <p>-Elements aus. |
| :first-line | p:first-line | Wählt die erste Zeile jedes <p>-Elements aus |
| :first-child | p:first-child | Der Selektor trifft auf <p>-Elemente zu, die das erste Kind eines beliebigen Elements sind. |
| :before | p:before | Fügt Inhalt vor jedem <p>-Element ein |
| :after | p:after | Fügt Inhalt nach jedem <p>-Element ein |
| :lang(Sprache) | p:lang(it) | Wählt einen Anfangswert für das lang-Attribut von <p>-Elementen aus. |