Atölye › Trafik lambası › 6/12. adım

Kırmızı, sarı, yeşil

Ne yapıyoruz

Üç lamba aynı sınıfı taşıyor ama her biri başka renkte olmalı. CSS'e "kaçıncı lamba?" diye sorabiliriz: :nth-child(1) birinci, :nth-child(2) ikinci...

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

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

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

Ne işe yarıyor

• .lamp:nth-child(1) → "ebeveyninin (gövdenin) birinci çocuğu olan lamba". (2) ikinci, (3) üçüncü.
• Her kural kendi lambasına renk veriyor: kırmızı, altın sarısı, yeşil.
• Bu kurallar .lamp kuralından sonra yazıldığı için onların rengi grinin yerine geçer: CSS'te aynı özelliğe iki kural değer verirse, (aynı güçteyse) sonra gelen kazanır.

Sıra sende

Üç kuralı .lamp kuralının altına yaz. Çalıştır.

Beceriler: CSS ile görünüm

← Ortada alt alta diz Söndür →

Tüm adımlar

1. Boş bir kutu
2. Kutuya biçim ver
3. İçine üç lamba
4. Yuvarlak lambalar
5. Ortada alt alta diz
6. Kırmızı, sarı, yeşil
7. Söndür
8. Bir lamba için zaman çizelgesi
9. Çizelgeyi oynat
10. Sırayla
11. Hız için tek ayar
12. Kendin yap: direk