HTML Introduction to HTML and CSS Make It Beautiful With CSS Select and Style Multiple Elements by Class

Raphael Reiter
Raphael Reiter
6,820 Points

How did you get to alternate between blue and orange paddings? (for your skills in the left box )

How did you get to alternate between blue and orange paddings? (for your skills in the left box )

2 Answers

Shawn Denham
PRO
Shawn Denham
Pro Student 16,669 Points

This rule in her css sets the background color of all the li elements in skills to orange. (specifically the background: #ff9904) part :)

.skills li {
  border-radius: 6px;
  display: inline-block;
  background: #ff9904;
  color: white;
  padding: 5px 10px;
  margin: 2px;
}

This rule utilizes nth-child pseudo selector to select every other li in skills and changes background to blue.

.skills li:nth-child(odd) {
  background: #0399ff;
}

Here is a video here on Treehouse that explains the nth-child selector.

hope this helps

ps. sorry about the edits to this post...not quite awake yet!