Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Challenge: Practice Structural Pseudo-Classes | The CSS Box Model & Spacing Elements
CSS Fundamentals

bookChallenge: Practice Structural Pseudo-Classes

Task

We are working with a set of elements, and the goal is to practice applying different colors using structural pseudo-classes. Your task is as follows:

  • Apply the color red to the first element using a structural pseudo-class.
  • Apply the color blue to the last element using a structural pseudo-class.
  • Apply the color green to every second element using a structural pseudo-class.
index.html

index.html

index.css

index.css

copy
  • :first-child: Targets the first child of a parent element.
  • :last-child: Targets the last child of a parent element.
  • :nth-child(): Targets a specific child of a parent element based on its position in the list. For instance, to select every second list item (2, 4, 6, etc.), you can use :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

Awesome!

Completion rate improved to 2.5

bookChallenge: Practice Structural Pseudo-Classes

Svep för att visa menyn

Task

We are working with a set of elements, and the goal is to practice applying different colors using structural pseudo-classes. Your task is as follows:

  • Apply the color red to the first element using a structural pseudo-class.
  • Apply the color blue to the last element using a structural pseudo-class.
  • Apply the color green to every second element using a structural pseudo-class.
index.html

index.html

index.css

index.css

copy
  • :first-child: Targets the first child of a parent element.
  • :last-child: Targets the last child of a parent element.
  • :nth-child(): Targets a specific child of a parent element based on its position in the list. For instance, to select every second list item (2, 4, 6, etc.), you can use :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