Ö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
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