Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Utmaning: Öva på Strukturella Pseudoklasser | CSS-Boxmodellen och Elementavstånd
CSS-Grunder

bookUtmaning: Öva på Strukturella Pseudoklasser

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.html

index.css

index.css

copy
  • :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.html

index.css

index.css

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 6

Fråga AI

expand

Fråga AI

ChatGPT

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?

bookUtmaning: Öva på Strukturella Pseudoklasser

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.html

index.css

index.css

copy
  • :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.html

index.css

index.css

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 6
some-alt