Workshop › Traffic light › Step 6 of 12

Red, yellow, green

What we are doing

All three lamps share one class, yet each needs its own color. :nth-child(n) picks the lamp by its position.

```css
.lamp:nth-child(1) {
  background: red;
}

.lamp:nth-child(2) {
  background: gold;
}

.lamp:nth-child(3) {
  background: limegreen;
}
```

What it means

• .lamp:nth-child(1) is a lamp that is the first child of its parent; 2 and 3 are the next ones.
• These rules come after .lamp, so their background wins over the grey.

Your turn

Write the three rules under the .lamp rule.

Skills: Styling with CSS

← Stack them in the middle Turn them off →

All steps

1. An empty box
2. Give the box a shape
3. Three lamps inside
4. Round lamps
5. Stack them in the middle
6. Red, yellow, green
7. Turn them off
8. A timeline for a lamp
9. Play the timeline
10. One after another
11. One setting for the speed
12. Build it yourself: a pole