Sınıf ve ID seçiciler

.class ve #id seçicilerinin farkını öğrenirsin.

Sınıf seçicisi

Bir sınıf seçicisi aynı etiket türünden farklı öğeleri ayırt etmemizi sağlar. Yazımı: nokta işareti, ardından sınıf adı. .featured seçicisi, class="featured" özniteliği taşıyan tüm öğeleri bulur — etiket ne olursa olsun.

Sınıf adları bir öğede birden fazla olabilir: class="featured highlight". Bu durumda her iki sınıf seçicisi de öğeyi yakalar. Sınıflar bu yüzden yeniden kullanılabilir stiller için idealdir.

Kimlik seçicisi

Bir kimlik seçicisi (#) sayfada yalnızca bir öğeye işaret etmek içindir. Yazımı: kare işareti, ardından kimlik adı. #header seçicisi id="header" özniteliğine sahip öğeyi bulur.

HTML belirtimine göre bir kimlik sayfada yalnızca bir kez geçer. Bu yüzden kimlik seçicileri tekil öğeler içindir; tekrarlanan stiller için sınıf kullanmalısın.

Öncelik sırası

Tarayıcı iki seçici aynı öğeyi aynı özellik için biçimlendirirse, hangisinin kazanacağını öncelik (specificity) belirler. Basit sıra: kimlik seçicisi sınıf seçicisinden, sınıf seçicisi tür seçicisinden güçlüdür.

Yani #main, .box'ı yener; .box da div'i yener. Aynı düzeydeki iki seçici çakışırsa, dosyada sonra yazılan kazanır.

Uygulama Sınıf ve kimlik seçicilerini yaz

İki ayrı stil bloğu ekle. Birincisi .button sınıf seçicisi; background: navy ve color: white özelliklerini taşısın. İkincisi #main kimlik seçicisi; padding: 1rem özelliğini taşısın.

Örnek çözümü göster

/* sınıf ve kimlik seçicilerini ekle */
.button {
  background: navy;
  color: white;
}
#main {
  padding: 1rem;
}

Kendini test et

Hangi öğe .menu sınıf seçicisiyle eşleşir?
```
.menu {
  padding: 0.5rem;
}
```
- <nav id="menu">
- <menu>
- <ul class="menu">
- <ul class="navigation">
Cevabı göster

<ul class="menu"> — Doğru. .menu sınıf seçicisi class="menu" taşıyan öğeleri bulur; <ul class="menu"> eşleşir.

Kimlik seçicisini yaz

____ {
  background: navy;
  color: white;
}

Cevabı göster

#header {
  background: navy;
  color: white;
}

Sıradaki ders: Evrensel seçici

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler