Was sind Pseudo-Klassen?
Eine Pseudo-Klasse wird verwendet, um einen besonderen Zustand eines Elements zu definieren.
Zum Beispiel kann es verwendet werden für:
- Stylen Sie ein Element, wenn ein Benutzer mit der Maus über sie
- Stil besuchte und nicht besuchte Links unterschiedlich
- Stylen Sie ein Element, wenn es den Fokus erhält
Mouse Over Me
Syntax
Die Syntax von Pseudo-Klassen:
selector:pseudo-class {
property:value;
}Anchor Pseudo-Klassen
Links können auf verschiedene Weise angezeigt werden:
Beispiel
/* 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;
}
Versuch es selber "  | Hinweis: a:hover MUSS kommen nach a:link und a:visited ! In der CSS - Definition , um wirksam zu sein , a:active MUSS kommen , nachdem a:hover in der CSS - Definition , um wirksam zu sein!Pseudo-Klassennamen nicht zwischen Groß- und Kleinschreibung unterschieden. |
|---|
Pseudo-Klassen und CSS-Klassen
Pseudo-Klassen können mit CSS-Klassen kombiniert werden:
Wenn Sie über den Link in dem Beispiel schweben, wird es die Farbe ändern:
Bewegen Sie den Mauszeiger auf <div>
Ein Beispiel der der Verwendung von :hover Pseudo-Klasse auf einem <div> Element:
CSS - Das :first-child Pseudo-Klasse
Die :first-child Pseudo-Klasse ein vorgeschriebenes Element , das das erste Kind eines anderen Elements ist.
Passen Sie die erste <p> Element
Im folgenden Beispiel stimmt der Wähler alle <p> Element , das das erste Kind eines Elements ist:
Passen Sie die erste <i> Element in allen <p> Elemente
Im folgenden Beispiel stimmt der Selektor das erste <i> Element in allen <p> Elemente:
Spiel alle <i> Elemente in allen ersten Kind <p> Elemente
Im folgenden Beispiel stimmt der Wähler alle <i> Elemente <p> Elemente , die das erste Kind eines anderen Elements sind:
CSS - Die :lang Pseudo-Klasse
Die :lang Pseudo-Klasse ermöglicht es Ihnen , spezielle Regeln für die verschiedenen Sprachen zu definieren.
In dem folgenden Beispiel :lang definiert die Anführungszeichen für <q> Elemente mit lang="no" :
Beispiel
<html>
<head>
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>
Versuch es selber " 
Mehr Beispiele
In verschiedenen Stilen Hyperlinks
Dieses Beispiel zeigt, wie andere Stile zu Hyperlinks hinzuzufügen.
Die Verwendung von :focus
Dieses Beispiel zeigt , wie die zu verwenden :focus Pseudo-Klasse.
Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4»
Alle CSS-Pseudo-Klassen
| Wähler | Beispiel | Beispiel Beschreibung |
|---|---|---|
| :active | a:active | Wählt den aktiven Link |
| :checked | input:checked | Wählt alle geprüft <input> Element |
| :disabled | input:disabled | Wählt alle deaktiviert <input> Element |
| :empty | p:empty | Wählt alle <p> Element , das keine Kinder hat |
| :enabled | input:enabled | Wählt alle aktiviert <input> Element |
| :first-child | p:first-child | Wählt alle <p> Elemente , die das erste Kind seiner Eltern ist |
| :first-of-type | p:first-of-type | Wählt alle <p> Element , das die erste ist , <p> Element des übergeordneten |
| :focus | input:focus | Wählt das <input> Element , das den Fokus hat |
| :hover | a:hover | Wählt Links auf der Maus über |
| :in-range | input:in-range | Wählt <input> Elemente mit einem Wert innerhalb eines bestimmten Bereichs |
| :invalid | input:invalid | Wählt alle <input> Elemente mit einem ungültigen Wert |
| :lang(language) | p:lang(it) | Wählt alle <p> Element mit einem lang Attributwert mit "es" ab |
| :last-child | p:last-child | Wählt alle <p> Elemente , die das letzte Kind seiner Eltern ist |
| :last-of-type | p:last-of-type | Wählt alle <p> Element , das das letzte ist <p> Element des übergeordneten |
| :link | a:link | Wählt alle nicht besuchte Links |
| :not(selector) | :not(p) | Jedes Element Wählt die nicht a <p> Element |
| :nth-child(n) | p:nth-child(2) | Wählt alle <p> Element , das das zweite Kind seiner Eltern ist |
| :nth-last-child(n) | p:nth-last-child(2) | Wählt alle <p> Element , das das zweite Kind seiner Eltern ist, aus dem letzten Kind zu zählen |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Wählt alle <p> Element , das die zweite ist <p> Element seiner Eltern, aus dem letzten Kind zu zählen |
| :nth-of-type(n) | p:nth-of-type(2) | Wählt alle <p> Element , das die zweite ist <p> Element des übergeordneten |
| :only-of-type | p:only-of-type | Wählt alle <p> Element , das das einzige ist <p> Element des übergeordneten |
| :only-child | p:only-child | Wählt alle <p> Element , das das einzige Kind seiner Eltern ist |
| :optional | input:optional | Wählt <input> Elemente ohne "required" Attribut |
| :out-of-range | input:out-of-range | Wählt <input> Elemente mit einem Wert außerhalb eines bestimmten Bereichs |
| :read-only | input:read-only | Wählt <input> Elemente mit einem "readonly" Attribut angegeben |
| :read-write | input:read-write | Wählt <input> Elemente ohne "readonly" Attribut |
| :required | input:required | Wählt <input> Elemente mit einem "required" Attribut angegeben |
| :root | root | Wählt das Stammelement des Dokuments |
| :target | #news:target | Wählt den aktuellen aktiven #news Element (auf einer URL enthält, die Ankernamen angeklickt) |
| :valid | input:valid | Wählt alle <input> Elemente mit einem gültigen Wert |
| :visited | a:visited | Wählt alle besuchten Links |
Alle CSS Pseudo-Elemente
| Wähler | Beispiel | Beispiel Beschreibung |
|---|---|---|
| ::after | p::after | Inhalt einfügen nach jedem <p> Element |
| ::before | p::before | Inhalt einfügen vor jedem <p> Element |
| ::first-letter | p::first-letter | Wählt den ersten Buchstaben jedes <p> Element |
| ::first-line | p::first-line | Wählt die erste Zeile jedes <p> Element |
| ::selection | p::selection | Wählt den Teil eines Elements, das durch einen Benutzer ausgewählt wird, |