Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Leer Uitdaging: Oefenen met Structurele Pseudo-Klassen | Het CSS-Boxmodel en het Uitlijnen van Elementen
CSS-Grondbeginselen

bookUitdaging: Oefenen met Structurele Pseudo-Klassen

Taak

We werken met een reeks elementen en het doel is om te oefenen met het toepassen van verschillende kleuren met behulp van structurele pseudo-klassen. Je taak is als volgt:

  • Pas de kleur red toe op het eerste element met een structurele pseudo-klasse.
  • Pas de kleur blue toe op het laatste element met een structurele pseudo-klasse.
  • Pas de kleur green toe op elk tweede element met een structurele pseudo-klasse.
index.html

index.html

index.css

index.css

copy
  • :first-child: Selecteert het eerste kind van een ouder element.
  • :last-child: Selecteert het laatste kind van een ouder element.
  • :nth-child(): Selecteert een specifiek kind van een ouder element op basis van zijn positie in de lijst. Om bijvoorbeeld elk tweede lijstitem (2, 4, 6, enz.) te selecteren, kun je :nth-child(2n) gebruiken.
index.html

index.html

index.css

index.css

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 6

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Suggested prompts:

Can you show me an example of how to use these pseudo-classes in CSS?

What kind of elements are we applying these styles to?

Can you explain how :nth-child(2n) works in more detail?

Awesome!

Completion rate improved to 2.56

bookUitdaging: Oefenen met Structurele Pseudo-Klassen

Veeg om het menu te tonen

Taak

We werken met een reeks elementen en het doel is om te oefenen met het toepassen van verschillende kleuren met behulp van structurele pseudo-klassen. Je taak is als volgt:

  • Pas de kleur red toe op het eerste element met een structurele pseudo-klasse.
  • Pas de kleur blue toe op het laatste element met een structurele pseudo-klasse.
  • Pas de kleur green toe op elk tweede element met een structurele pseudo-klasse.
index.html

index.html

index.css

index.css

copy
  • :first-child: Selecteert het eerste kind van een ouder element.
  • :last-child: Selecteert het laatste kind van een ouder element.
  • :nth-child(): Selecteert een specifiek kind van een ouder element op basis van zijn positie in de lijst. Om bijvoorbeeld elk tweede lijstitem (2, 4, 6, enz.) te selecteren, kun je :nth-child(2n) gebruiken.
index.html

index.html

index.css

index.css

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 6
some-alt