Tür seçiciler

Etiket adıyla eşleşen seçicileri öğrenirsin.

Tür seçici nedir?

CSS'te bir tür seçicisi (type selector) HTML etiketinin adını doğrudan yazar. Açılış ve kapanış işaretleri olmadan, yalnızca ad. Örneğin p seçicisi sayfadaki tüm paragrafları bulur; h1 tüm birinci düzey başlıkları, a tüm bağlantıları.

Tür seçicileri kaba kuvvettir: eşleşen her öğeyi yakalar. Bu yüzden site geneli varsayılan stiller için uygundur — tek satır, onlarca öğe.

Her eşleşen öğeyi biçimler

Bir tür seçicisi yazdığında, tarayıcı o etiketten gelen tüm öğeleri bulur ve aynı stilleri uygular. h1 { font-family: serif; } yazarsan, sayfadaki her h1 aynı aileyi kullanır.

Sonradan yeni bir h1 eklersen otomatik olarak aynı biçimi alır. Tür seçicileri bu yüzden tutarlı bir taban için idealdir.

Birden çok tür seçicisi

Gerçek bir stil sayfasında birçok tür seçicisi yan yana çalışır. body, h1, p, a — her biri farklı bir taban belirler ve tarayıcı hepsini birlikte uygular.

İki tür seçicisi aynı özelliği farklı değerle ayarlarsa, dosyada sonra yazılan geçerli olur. Bu davranışı sonraki derslerde daha ayrıntılı ele alacağız.

Uygulama h2 için renk tanımla

Bir h2 tür seçicisi yaz ve color: navy özelliğini ata. Seçici etiketin adıyla başlamalı; açısal parantez yok.

Örnek çözümü göster

/* h2 seçicisini ekle */
h2 {
  color: navy;
}

Kendini test et

p seçicisi neyi eşleştirir?
```
p {
  line-height: 1.5;
}
```
- Yalnızca <p> kimliğine sahip öğeyi
- Sayfadaki tüm paragrafları
- Yalnızca sınıfı 'p' olan öğeleri
- Hiçbir şeyi, geçersiz bir seçicidir
Cevabı göster

Sayfadaki tüm paragrafları — Doğru. p bir tür seçicisidir ve sayfadaki tüm paragrafları eşleştirir.

Paragraf seçicisini yaz

____ {
  line-height: 1.5;
  color: #333;
}

Cevabı göster

p {
  line-height: 1.5;
  color: #333;
}

Tür seçicisini hedefine eşle

p

Tüm paragraflar
h1

Birinci düzey başlık
a

Tüm bağlantılar
img

Tüm görseller

Sıradaki ders: Sınıf ve ID seçiciler

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler