Leer Uitdaging: Oefen Structurele Pseudo-Klassen | Het CSS-Boxmodel en het Uitlijnen van Elementen

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. De opdracht is als volgt:

De kleur red toepassen op het eerste element met een structurele pseudo-klasse.
De kleur blue toepassen op het laatste element met een structurele pseudo-klasse.
De kleur green toepassen op elk tweede element met een structurele pseudo-klasse.

index.html

index.css

: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.css

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 6

Vraag AI

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?

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. De opdracht is als volgt:

De kleur red toepassen op het eerste element met een structurele pseudo-klasse.
De kleur blue toepassen op het laatste element met een structurele pseudo-klasse.
De kleur green toepassen op elk tweede element met een structurele pseudo-klasse.

index.html

index.css

: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.css

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 6