Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Challenge: Structural Pseudo-Classes | Box Model and Element Spacing

Challenge: Structural Pseudo-ClassesChallenge: 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

js

index.js

  • :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

js

index.js

Everything was clear?

Section 3. Chapter 6

Challenge: Structural Pseudo-ClassesChallenge: 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

js

index.js

  • :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

js

index.js

Everything was clear?

Section 3. Chapter 6
some-alt