Öznitelik seçiciler

[attr] ve [attr=value] seçicilerini öğrenirsin.

Öznitelik seçicisi

Bir öznitelik seçicisi bir HTML özniteliğine göre öğe seçer. En basit biçimi [href] gibi köşeli parantez içinde yalnızca öznitelik adını yazmaktır. Bu seçici href özniteliği taşıyan tüm öğeleri bulur.

Öznitelik seçiciler bağlantılar, form alanları ve veri öznitelikleri gibi belirli işaretleri hedeflemek için idealdir. Tür seçicisinden daha keskin, sınıftan daha az bağlayıcıdır.

Değerle eşleştirme

Özniteliğin değerini de eşleştirmek istersen [attr=value] biçimini kullan. input[type="checkbox"] yalnızca type="checkbox" olan input öğelerini seçer.

Değer tırnak içinde yazılır; tek veya çift tırnak kabul edilir. Bu keskin eşleştirme form denetimlerini ve veri öznitelikli öğeleri hedeflemeyi çok kolaylaştırır. Tür seçicisi tüm input'ları yakalarken, öznitelik seçicisi yalnızca istediğin alt kümeyi alır.

Uygulama İki öznitelik seçicisi ekle

İki ayrı stil bloğu yaz. Birincisi input[type="email"] seçicisi; border-color: teal tanımlasın. İkincisi a[href] seçicisi; color: navy tanımlasın.

Örnek çözümü göster

/* öznitelik seçicilerini ekle */
input[type="email"] {
  border-color: teal;
}
a[href] {
  color: navy;
}

Kendini test et

Hangi seçici yalnızca e-posta input'larını seçer?
- input
- input[type="email"]
- input.email
- #email
Cevabı göster

input[type="email"] — Doğru. input[type="email"] yalnızca type="email" olan input öğelerini seçer.

Checkbox seçicisini yaz

____ {
  accent-color: teal;
}

Cevabı göster

[type="checkbox"] {
  accent-color: teal;
}

Öznitelik seçicisini anlamına eşle

[href]

href taşıyan tüm öğeler
[type="email"]

type'ı email olanlar
a[href]

Bağlantı olan tüm a etiketleri
[disabled]

disabled olan öğeler

Sıradaki ders: Çocuk seçici (>)

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler