Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Challenge: Practice Structural Pseudo-Classes | Section
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
CSS Fundamentals for React Developers - 1768407374224

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

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 1. Розділ 22

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

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

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 1. Розділ 22
some-alt