Öznitelik seçici desenleri

[attr^=], [attr$=], [attr*=] desenlerini öğrenirsin.

Üç desen: ^, $, *

Öznitelik seçiciler yalnızca tam değer eşleştirmez. Üç desen öznitelik değerinin bir bölümüne bakar: ^ ön eke, $ soneke, * alt dizeye.

a[href^="https"] HTTPS bağlantılarını, a[href$=".pdf"] PDF bağlantılarını, a[href*="login"] içinde 'login' geçen bağlantıları bulur. Bu desenler bağlantı türüne göre otomatik stil vermek için idealdir ve gerçek temalarda sıkça karşına çıkar.

Hangi desen hangi iş?

Üç desen de benzer yazılır: köşeli parantez içinde öznitelik adı, işaret, eşittir ve tırnak içinde değer. Yalnızca işaret değişir.

[class^="btn-"] 'btn-' ile başlayan sınıfları yakalar; [src$=".webp"] WebP görselleri; [href*="map"] 'map' geçen tüm bağlantılar. Her biri farklı bir kullanım; hepsi gerçek sitelerde sıkça karşına çıkar.

Uygulama PDF bağlantılarını işaretle

Bir a[href$=".pdf"] seçicisi yaz ve içine color: maroon bildirimi ekle. Böylece PDF bağlantıları farklı renkte görünür.

Örnek çözümü göster

/* pdf bağlantılarını renklendir */
a[href$=".pdf"] {
  color: maroon;
}

Kendini test et

Bu seçici hangi bağlantıları yakalar?
```
a[href^="https"] {
  color: green;
}
```
- href özniteliği olmayanları
- href değeri 'https' ile bitenleri
- href değeri 'https' içerenleri
- href değeri 'https' ile başlayanları
Cevabı göster

href değeri 'https' ile başlayanları — Doğru. ^ işareti ön ek eşleştirir; 'https' ile başlayan bağlantılar yakalanır.

HTTPS bağlantılarını seç

a____ {
  color: green;
}

Cevabı göster

a[href^="https"] {
  color: green;
}

Deseni eşleştiği şeyle eşle

a[href^="https"]

https ile başlayan bağlantı
a[href$=".pdf"]

.pdf ile biten bağlantı
a[href*="login"]

login içeren bağlantı
a[href]

Herhangi bir bağlantı

Sıradaki ders: :where ve :has

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler