Verwendung von Strukturellen und Funktionalen Pseudoklassen
Pseudo-Klassen ermöglichen eine präzise Auswahl von Elementen basierend auf ihrer Reihenfolge innerhalb eines Containers. Im Folgenden werden einige der am häufigsten verwendeten Pseudo-Klassen vorgestellt.
:first-child
Die Pseudo-Klasse :first-child wählt ein Element aus, das das erste Kind seines Elternelements ist, unabhängig von dessen Tag oder Klassenname. Im folgenden Beispiel wird dies verdeutlicht. Es gibt eine Reihe von Elementen, und nur für das erste Element (das erste <li>-Element) soll die Eigenschaft color auf blue gesetzt werden.
index.html
styles.css
Ausgabe
Nur das erste FAQ-Element wurde ausgewählt und spezifische Stile wurden angewendet.
:last-child
Die Pseudo-Klasse :last-child wählt das letzte Kind seines Elternteils aus und ermöglicht die Anpassung beliebiger Eigenschaften. Im Folgenden ein Beispiel, das die effektive Nutzung dieser Pseudo-Klasse veranschaulicht.
index.html
styles.css
Ausgabe
:nth-child
Die Pseudo-Klasse :nth-child ermöglicht die Auswahl von Elementen basierend auf ihrer Position innerhalb einer Liste von Geschwistern. Eine einfache Auswahl ist durch Angabe einer Zahl möglich. Zum Beispiel:
index.html
styles.css
Ausgabe
Die Akzentstile wurden nur auf die ausgewählten Elemente (2. und 3.) angewendet.
Fortgeschrittenes :nth-child
Für komplexere Szenarien kann die Formel an+b verwendet werden, um mehrere Elemente basierend auf ihrer Position auszuwählen. So funktioniert die Formel:
abestimmt das Wiederholungsmuster (z. B. jedes 2., 3. Kind usw.);blegt den Startpunkt oder Offset für die Auswahl fest;nfungiert als Zähler, der bei jeder Iteration ab 0 erhöht wird.
Betrachten wir einige typische Selektoren.
/* Selects every second element (2, 4, 6, ...) */
.item:nth-child(2n) {
/* Styles for every second element */
}
/* Selects the first three elements */
.item:nth-child(-n + 3) {
/* Styles for the first three elements */
}
/* Selects all odd elements */
.item:nth-child(odd) {
/* Styles for all odd elements */
}
/* Selects every second child starting from the first (1, 3, 5, ...) */
.item:nth-child(2n+1) {
/* Styles for the last three elements */
}
Hinweis
Es ist nicht notwendig, sich alle Selektoren zu merken. Sie können jederzeit bei Google danach suchen.
:not()
Die Pseudo-Klasse :not() wählt Elemente aus, die nicht mit einem angegebenen Selektor übereinstimmen. Zum Beispiel würde :not(p) alle Elemente außer <p>-Elementen auswählen. Im Folgenden einige Beispiele:
index.html
index.css
1. Welche Pseudoklasse kann verwendet werden, um das erste Element in einer Menge von Elementen auszuwählen?
2. Wofür wird die Pseudoklasse nth-child verwendet?
3. Wie funktioniert die Pseudoklasse last-child?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.56Verwendung von Strukturellen und Funktionalen Pseudoklassen
Swipe um das Menü anzuzeigen
Pseudo-Klassen ermöglichen eine präzise Auswahl von Elementen basierend auf ihrer Reihenfolge innerhalb eines Containers. Im Folgenden werden einige der am häufigsten verwendeten Pseudo-Klassen vorgestellt.
:first-child
Die Pseudo-Klasse :first-child wählt ein Element aus, das das erste Kind seines Elternelements ist, unabhängig von dessen Tag oder Klassenname. Im folgenden Beispiel wird dies verdeutlicht. Es gibt eine Reihe von Elementen, und nur für das erste Element (das erste <li>-Element) soll die Eigenschaft color auf blue gesetzt werden.
index.html
styles.css
Ausgabe
Nur das erste FAQ-Element wurde ausgewählt und spezifische Stile wurden angewendet.
:last-child
Die Pseudo-Klasse :last-child wählt das letzte Kind seines Elternteils aus und ermöglicht die Anpassung beliebiger Eigenschaften. Im Folgenden ein Beispiel, das die effektive Nutzung dieser Pseudo-Klasse veranschaulicht.
index.html
styles.css
Ausgabe
:nth-child
Die Pseudo-Klasse :nth-child ermöglicht die Auswahl von Elementen basierend auf ihrer Position innerhalb einer Liste von Geschwistern. Eine einfache Auswahl ist durch Angabe einer Zahl möglich. Zum Beispiel:
index.html
styles.css
Ausgabe
Die Akzentstile wurden nur auf die ausgewählten Elemente (2. und 3.) angewendet.
Fortgeschrittenes :nth-child
Für komplexere Szenarien kann die Formel an+b verwendet werden, um mehrere Elemente basierend auf ihrer Position auszuwählen. So funktioniert die Formel:
abestimmt das Wiederholungsmuster (z. B. jedes 2., 3. Kind usw.);blegt den Startpunkt oder Offset für die Auswahl fest;nfungiert als Zähler, der bei jeder Iteration ab 0 erhöht wird.
Betrachten wir einige typische Selektoren.
/* Selects every second element (2, 4, 6, ...) */
.item:nth-child(2n) {
/* Styles for every second element */
}
/* Selects the first three elements */
.item:nth-child(-n + 3) {
/* Styles for the first three elements */
}
/* Selects all odd elements */
.item:nth-child(odd) {
/* Styles for all odd elements */
}
/* Selects every second child starting from the first (1, 3, 5, ...) */
.item:nth-child(2n+1) {
/* Styles for the last three elements */
}
Hinweis
Es ist nicht notwendig, sich alle Selektoren zu merken. Sie können jederzeit bei Google danach suchen.
:not()
Die Pseudo-Klasse :not() wählt Elemente aus, die nicht mit einem angegebenen Selektor übereinstimmen. Zum Beispiel würde :not(p) alle Elemente außer <p>-Elementen auswählen. Im Folgenden einige Beispiele:
index.html
index.css
1. Welche Pseudoklasse kann verwendet werden, um das erste Element in einer Menge von Elementen auszuwählen?
2. Wofür wird die Pseudoklasse nth-child verwendet?
3. Wie funktioniert die Pseudoklasse last-child?
Danke für Ihr Feedback!
