Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Raphael Reiter
Raphael Reiter
6,820 Points
Posted by 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
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,802 Points
Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,802 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!