Lära Utmaning: Öva på Strukturella Pseudoklasser | CSS-Boxmodellen och Elementavstånd

Uppgift

Vi arbetar med en uppsättning element och målet är att öva på att använda olika färger med hjälp av strukturella pseudoklasser. Din uppgift är följande:

Applicera färgen red på det första elementet med en strukturell pseudoklass.
Applicera färgen blue på det sista elementet med en strukturell pseudoklass.
Applicera färgen green på vartannat element med en strukturell pseudoklass.

index.html

index.css

:first-child: Riktar in sig på den första barnet till ett föräldraelement.
:last-child: Riktar in sig på det sista barnet till ett föräldraelement.
:nth-child(): Riktar in sig på ett specifikt barn till ett föräldraelement baserat på dess position i listan. Till exempel, för att välja vartannat listelement (2, 4, 6, osv.), kan du använda :nth-child(2n).

index.html

index.css

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 6

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

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?

Svep för att visa menyn

Uppgift

Vi arbetar med en uppsättning element och målet är att öva på att använda olika färger med hjälp av strukturella pseudoklasser. Din uppgift är följande:

Applicera färgen red på det första elementet med en strukturell pseudoklass.
Applicera färgen blue på det sista elementet med en strukturell pseudoklass.
Applicera färgen green på vartannat element med en strukturell pseudoklass.

index.html

index.css

:first-child: Riktar in sig på den första barnet till ett föräldraelement.
:last-child: Riktar in sig på det sista barnet till ett föräldraelement.
:nth-child(): Riktar in sig på ett specifikt barn till ett föräldraelement baserat på dess position i listan. Till exempel, för att välja vartannat listelement (2, 4, 6, osv.), kan du använda :nth-child(2n).

index.html

index.css

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 6