Eine Pseudoklasse wird verwendet, um einen speziellen Zustand eines Elements zu definieren. Pseudoklassenselektoren sind CSS-Selektoren, denen ein Doppelpunkt vorangestellt ist. Du bist wahrscheinlich mit einigen von ihnen sehr vertraut.
Sie können zum Beispiel verwendet werden, um:
- ein Element zu gestalten, wenn ein Benutzer mit der Maus darüber fährt
- besuchte und nicht besuchte Links unterschiedlich zu gestalten
- Stilisierung eines Elements, wenn es den Fokus erhält
Syntax
selector:pseudo-class {
property: value;
}Anker-Pseudo-Klassen
Links können auf unterschiedliche Weise dargestellt werden:
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}Hinweis: a:hover MUSS in der CSS-Definition nach a:link und a:visited stehen, um wirksam zu sein! a:active MUSS in der CSS-Definition nach a:hover stehen, um wirksam zu sein! Bei Pseudoklassennamen wird nicht zwischen Groß- und Kleinschreibung unterschieden.
W3Schools
Pseudo-Klassen und HTML-Klassen
Pseudo-Klassen können mit HTML-Klassen kombiniert werden:
Wenn Sie den Mauszeiger über den Link im Beispiel bewegen, ändert er seine Farbe:
a.highlight:hover {
color: #ff0000;
}Ein Beispiel für die Verwendung der Pseudoklasse :hover für ein <div>-Element:
div:hover {
background-color: blue;
}Bewegen Sie den Mauszeiger über ein <div>-Element, um ein <p>-Element anzuzeigen (wie ein Tooltip):
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}Die :first-child Pseudoklasse
Die Pseudoklasse :first-child passt zu einem angegebenen Element, das das erste Kind eines anderen Elements ist.
Im folgenden Beispiel passt der Selektor auf jedes <p>-Element, das das erste Kind eines beliebigen Elements ist:
p:first-child {
color: blue;
}Alle CSS-Pseudoklassen
| Selector | Beispiel | Beispielhafte Beschreibung |
|---|---|---|
| :active | a:active | Wählt den aktiven Link aus |
| :checked | input:checked | Wählt jedes angekreuzte <input>-Element aus |
| :disabled | input:disabled | Wählt jedes deaktivierte <input>-Element aus |
| :empty | p:empty | Wählt jedes <p>-Element aus, das keine Kinder hat |
| :enabled | input:enabled | Wählt jedes aktivierte <input>-Element aus |
| :first-child | p:first-child | Wählt jedes <p>-Element aus, das das erste Kind seines Elternteils ist |
| :first-of-type | p:first-of-type | Wählt jedes <p>-Element aus, das das erste <p>-Element seiner Eltern ist |
| :focus | input:focus | Wählt das <input>-Element aus, das den Fokus hat |
| :hover | a:hover | Selektiert Links beim Überfahren mit der Maus |
| :in-range | input:in-range | Wählt <input>-Elemente mit einem Wert innerhalb eines bestimmten Bereichs aus |
| :invalid | input:invalid | Selektiert alle <input>-Elemente mit einem ungültigen Wert |
| :lang(language) | p:lang(it) | Wählt jedes <p>-Element aus, dessen Wert für das lang-Attribut mit „it“ beginnt |
| :last-child | p:last-child | Wählt jedes <p>-Element aus, das das letzte Kind seiner Eltern ist |
| :last-of-type | p:last-of-type | Wählt jedes <p>-Element aus, das das letzte <p>-Element seiner Eltern ist |
| :link | a:link | Markiert alle nicht besuchten Links |
| :not(selector) | :not(p) | Wählt jedes Element aus, das kein <p>-Element ist |
| :nth-child(n) | p:nth-child(2) | Wählt jedes <p>-Element aus, das das zweite Kind seines Elternteils ist |
| :nth-last-child(n) | p:nth-last-child(2) | Wählt jedes <p>-Element aus, das das zweite Kind seines Elternteils ist, beginnend mit dem letzten Kind |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Wählt jedes <p>-Element aus, das das zweite <p>-Element seiner Eltern ist, beginnend mit dem letzten Kind |
| :nth-of-type(n) | p:nth-of-type(2) | Wählt jedes <p>-Element aus, das das zweite <p>-Element seiner Eltern ist |
| :only-of-type | p:only-of-type | Wählt jedes <p>-Element aus, das das einzige <p>-Element seiner Eltern ist |
| :only-child | p:only-child | Wählt jedes <p>-Element aus, das das einzige Kind seines Elternteils ist |
| :optional | input:optional | Wählt <input>-Elemente ohne das Attribut „erforderlich“ aus |
| :out-of-range | input:out-of-range | Wählt <input>-Elemente mit einem Wert außerhalb eines bestimmten Bereichs aus |
| :read-only | input:read-only | Wählt <input>-Elemente mit einem „readonly“-Attribut aus |
| :read-write | input:read-write | Wählt <input>-Elemente ohne einem „readonly“-Attribut aus |
| :required | input:required | Wählt <input>-Elemente mit einem „required“-Attribut aus |
| :root | root | Wählt das Wurzelelement des Dokuments aus |
| :target | #news:target | Wählt das aktuell aktive #news-Element aus (wenn auf eine URL geklickt wird, die diesen Ankernamen enthält) |
| :valid | input:valid | Wählt alle <input>-Elemente mit einem gültigen Wert aus |
| :visited | a:visited | Selektiert alle besuchten Links |
Alle CSS-Pseudoelemente
| Selektor | Beispiel | Beispielhafte Beschreibung |
|---|---|---|
| ::after | p::after | Inhalt nach jedem <p>-Element einfügen |
| ::before | p::before | Fügt den Inhalt vor jedem <p>-Element ein |
| ::first-letter | p::first-letter | Wählt den ersten Buchstaben eines jeden <p>-Elements aus |
| ::first-line | p::first-line | Wählt die erste Zeile eines jeden <p>Elements aus |
| ::selection | p::selection | Wählt den Teil eines Elements aus, der von einem Benutzer ausgewählt wird |
Abonniere das kostenlose KI-Update
Bleib auf dem Laufenden in Sachen Künstliche Intelligenz!
Melde Dich jetzt mit Deiner E-Mail-Adresse an und ich versorge Dich kostenlos mit News-Updates, Tools, Tipps und Empfehlungen aus den Bereichen Künstliche Intelligenz für dein Online Business, WordPress, SEO, Online-Marketing und vieles mehr.
Keine Sorge, ich mag Spam genauso wenig wie Du und gebe Deine Daten niemals weiter! Du bekommst höchstens einmal pro Woche eine E-Mail von mir. Versprochen.
