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

Kursinhalt

CSS Fundamentals

CSS Fundamentals

1. Getting Started with CSS
2. Styling Text in CSS
3. The CSS Box Model & Spacing Elements
4. Mastering Flexbox for Layouts
5. Adding Decorative Effects with CSS

book
Challenge: 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.

html

index.html

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

html

index.html

css

index.css

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 6

Fragen Sie AI

expand
ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

course content

Kursinhalt

CSS Fundamentals

CSS Fundamentals

1. Getting Started with CSS
2. Styling Text in CSS
3. The CSS Box Model & Spacing Elements
4. Mastering Flexbox for Layouts
5. Adding Decorative Effects with CSS

book
Challenge: 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.

html

index.html

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

html

index.html

css

index.css

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 6
Wir sind enttäuscht, dass etwas schief gelaufen ist. Was ist passiert?
some-alt