Structurele en Functionele Pseudoklassen Gebruiken
Pseudo-klassen maken het mogelijk om elementen nauwkeurig te selecteren op basis van hun volgorde binnen een container. Laten we enkele van de meest gebruikte pseudo-klassen bekijken.
:first-child
De :first-child pseudo-klasse selecteert een element dat het eerste kind is van zijn ouder, ongeacht het tag- of class-naam. Overweeg het volgende voorbeeld ter verduidelijking. We hebben een reeks elementen en willen alleen voor het eerste element (het eerste <li>-element) de eigenschap color instellen op blue.
index.html
styles.css
Uitvoer
Alleen het eerste FAQ-item is geselecteerd en specifieke stijlen zijn toegepast.
:last-child
De :last-child pseudo-klasse richt zich op het laatste kind van zijn ouder, waardoor we alle eigenschappen ervan kunnen aanpassen. Laten we een voorbeeld bekijken om te illustreren hoe we deze pseudo-klasse effectief kunnen gebruiken.
index.html
styles.css
Uitvoer
:nth-child
De pseudo-klasse :nth-child maakt het mogelijk om elementen te selecteren op basis van hun positie binnen een lijst van broerselementen. Eenvoudige selectie kan door een getal op te geven. Bijvoorbeeld:
index.html
styles.css
Uitvoer
De accentstijlen zijn alleen toegepast op de geselecteerde elementen (2e en 3e).
Geavanceerde :nth-child
Voor complexere scenario's kun je de formule an+b gebruiken om meerdere elementen te selecteren op basis van hun positie. Zo werkt de formule:
abepaalt het herhalingspatroon (bijvoorbeeld elke 2e, 3e kind, enz.);bstelt het beginpunt of de offset voor de selectie in;nfungeert als teller die bij elke iteratie met 1 wordt verhoogd, beginnend bij 0.
Hier volgen enkele typische selectoren.
/* 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 */
}
Opmerking
Het is niet nodig om alle selectoren te onthouden. Je kunt ze altijd opzoeken via Google.
:not()
De :not() pseudo-klasse selecteert elementen die niet overeenkomen met een opgegeven selector. Bijvoorbeeld, :not(p) selecteert alle elementen behalve <p>-elementen. Laten we enkele voorbeelden bekijken:
index.html
index.css
1. Welke pseudo-klasse kan worden gebruikt om het eerste element in de reeks elementen te selecteren?
2. Waarvoor wordt de pseudo-klasse nth-child gebruikt?
3. Hoe werkt de pseudo-klasse last-child?
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Awesome!
Completion rate improved to 2.56Structurele en Functionele Pseudoklassen Gebruiken
Veeg om het menu te tonen
Pseudo-klassen maken het mogelijk om elementen nauwkeurig te selecteren op basis van hun volgorde binnen een container. Laten we enkele van de meest gebruikte pseudo-klassen bekijken.
:first-child
De :first-child pseudo-klasse selecteert een element dat het eerste kind is van zijn ouder, ongeacht het tag- of class-naam. Overweeg het volgende voorbeeld ter verduidelijking. We hebben een reeks elementen en willen alleen voor het eerste element (het eerste <li>-element) de eigenschap color instellen op blue.
index.html
styles.css
Uitvoer
Alleen het eerste FAQ-item is geselecteerd en specifieke stijlen zijn toegepast.
:last-child
De :last-child pseudo-klasse richt zich op het laatste kind van zijn ouder, waardoor we alle eigenschappen ervan kunnen aanpassen. Laten we een voorbeeld bekijken om te illustreren hoe we deze pseudo-klasse effectief kunnen gebruiken.
index.html
styles.css
Uitvoer
:nth-child
De pseudo-klasse :nth-child maakt het mogelijk om elementen te selecteren op basis van hun positie binnen een lijst van broerselementen. Eenvoudige selectie kan door een getal op te geven. Bijvoorbeeld:
index.html
styles.css
Uitvoer
De accentstijlen zijn alleen toegepast op de geselecteerde elementen (2e en 3e).
Geavanceerde :nth-child
Voor complexere scenario's kun je de formule an+b gebruiken om meerdere elementen te selecteren op basis van hun positie. Zo werkt de formule:
abepaalt het herhalingspatroon (bijvoorbeeld elke 2e, 3e kind, enz.);bstelt het beginpunt of de offset voor de selectie in;nfungeert als teller die bij elke iteratie met 1 wordt verhoogd, beginnend bij 0.
Hier volgen enkele typische selectoren.
/* 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 */
}
Opmerking
Het is niet nodig om alle selectoren te onthouden. Je kunt ze altijd opzoeken via Google.
:not()
De :not() pseudo-klasse selecteert elementen die niet overeenkomen met een opgegeven selector. Bijvoorbeeld, :not(p) selecteert alle elementen behalve <p>-elementen. Laten we enkele voorbeelden bekijken:
index.html
index.css
1. Welke pseudo-klasse kan worden gebruikt om het eerste element in de reeks elementen te selecteren?
2. Waarvoor wordt de pseudo-klasse nth-child gebruikt?
3. Hoe werkt de pseudo-klasse last-child?
Bedankt voor je feedback!
