Gruplama ve virgül

Birden çok seçiciyi virgülle gruplamayı öğrenirsin.

Virgülle gruplama

Birden çok seçiciye aynı stilleri uygulamak istersen aralarına virgül koyarak gruplarsın. h1, h2, h3 { color: navy; } üç başlık türünü de navy yapar.

Virgül 've' anlamına gelir: her seçici ayrı ayrı değerlendirilir ve hepsi aynı stil bloğunu paylaşır. Bu, tekrarı azaltır ve sayfanı düzenli tutar.

Farklı türleri karıştır

Gruplama yalnızca aynı türden seçicilerle sınırlı değildir. Tür, sınıf ve kimlik seçicilerini istediğin gibi karıştırabilirsin. h1, .title, #slogan { font-weight: bold; } geçerli bir gruplamadır.

Her seçici kendi başına değerlendirilir; ortak olan yalnızca sonuçtaki stillerdir. Bu esneklik gerçek temaları düzenlerken işini çok kolaylaştırır.

Uygulama Üç başlığı grupla

h1, h2 ve h3 seçicilerini virgülle tek bir grup hâline getir ve font-family: serif tanımla. Üç seçici de aynı stil bloğunu paylaşmalı.

Örnek çözümü göster

/* başlıkları grupla */
h1, h2, h3 {
  font-family: serif;
}

Kendini test et

Bu gruplama ne yapar?
```
h1, h2, h3 {
  color: navy;
}
```
- Yalnızca h1'i navy yapar
- Yalnızca en son yazılan h3'ü navy yapar
- Hata verir; virgülle gruplama yapılamaz
- h1, h2 ve h3'ün hepsini navy yapar
Cevabı göster

h1, h2 ve h3'ün hepsini navy yapar — Doğru. Virgülle gruplanan üç seçicinin hepsi aynı stil bloğunu paylaşır.

Üçüncü başlığı gruba ekle

h1, h2, ____ {
  font-family: serif;
}

Cevabı göster

h1, h2, h3 {
  font-family: serif;
}

Seçici listesini anlamına eşle

h1, h2, h3

Üç başlık türü
.btn, .link

İki sınıf
#header, #footer

İki kimlik
*

Tüm öğeler

Sıradaki ders: Öznitelik seçiciler

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler