CSS Öznitelik Seçicileri
Şimdiye kadar öğeyi etiket adı, class, id ve ağaç ilişkileriyle buluyordunuz. Bazen HTML gerçeği zaten söyler: bu bağlantıda target var, o alan type="email", adres https ile başlıyor. Öznitelik seçici o gerçeği okur — her durum için yeni bir class uydurmadan.
Öznitelik seçici nedir?
Öznitelik seçici, belirli bir HTML özniteliği olan öğeleri bulur. Yalnızca «varlığı» kontrol edebilir veya değeri tam / kısmi ölçebilirsiniz. Öznitelik adı köşeli parantez içinde gelir: [attr].
Beş günlük kalıp
Bunlarla neredeyse tüm sıradan öznitelik işini kapsarsınız.
📊 Öznitelik seçici işleçleri
| Kalıp | Basit anlam | Örnek |
|---|---|---|
[attr] |
Bu öznitelik var (herhangi bir değer) | a[target] |
[attr="value"] |
Değer tam olarak budur | input[type="email"] |
[attr^="value"] |
Değer bu metinle başlar | a[href^="https"] |
[attr$="value"] |
Değer bu metinle biter | a[href$=".pdf"] |
[attr*="value"] |
Bu metin değerin bir yerinde geçer | a[href*="docs"] |
Yalnızca varlık — [attr]
Paranteze yalnızca adı koyduğunuzda anlamı şudur: «bu öznitelik olsun.» Değeri ne olursa olsun önemli değil.
Varlık — yeni sekme açan bağlantılar
cssa[target] {
font-weight: 600;
}Ne zaman işe yarar?
HTML’deki isteğe bağlı bayraklar: target’lı bir bağlantı veya data-state taşıyan bir öğe — değerini henüz süzmeseniz bile.
Tam değer — [attr="value"]
= işareti değerin harf harf aynı olmasını ister. Değeri genelde tırnak içine yazın; daha net ve güvenli.
Tam değer — e-posta alanı
cssinput[type="email"] {
border: 1px solid #0f766e;
}Class mı yazalım, type mı kullanalım?
HTML zaten type="email" taşıyorsa bunu seçicide yazın. Yeni bir class (ör. .email-field), aynı görünümü bu öznitelik olmayan bir şeye de istediğinizde gerekir.
Değerin başı — ^=
^= demek: öznitelik değeri bu metinle başlar. Güvenli adresler veya ortak önek için çok işe yarar.
İle başlar — https bağlantıları
cssa[href^="https"] {
color: #0f766e;
}Değerin sonu — $=
$= demek: değer bu metinle biter. href veya src içindeki dosya uzantısı için biçilmiş kaftan.
İle biter — PDF bağlantısı
cssa[href$=".pdf"] {
font-style: italic;
}Değerin bir yerinde — *=
*= der ki: bu metin değerin herhangi bir yerinde görünsün. Güçlüdür ama çabuk genişler. Başını veya sonunu biliyorsanız ^= veya $= genelde daha temizdir.
İçerir — adreste docs yolu
cssa[href*="docs"] {
text-decoration: underline;
}İyi alışkanlıklar
- Seçicide değeri tırnak içine yazın:
type="email" - Sayfa kalabalıksa etiket adını da ekleyin:
input[type="search"]çıplak[type="search"]ten daha net okunur - Yazımı ve büyük/küçük harfi HTML’deki gibi tutun
- Her class’ı öznitelikle değiştirmeyin; işaretleme o gerçeği zaten taşıyorsa özniteliğe gidin
Kendiniz deneyin
- Üç bağlantı: biri
https://…, biri.pdfile bitsin, birinin yolundadocsolsun; ayrıca<input type="email">ve<input type="text">. a[href^="https"] { color: #0f766e; }koyun — yalnızca güvenli bağlantının rengi değişsin.a[href$=".pdf"] { font-style: italic; }— PDF bağlantısı italik olsun.input[type="email"] { border-color: #0f766e; }— yalnızca e-posta alanı kenarlık alsın.- İsteğe bağlı:
a[href*="docs"]e bakın; sıkı önek/sonekten daha çok bağlantı yakalayabilir.
Sık hatalar
- Tırnak daha net ve güvenliyken
[type=email]tırnaksız ^=yerine*=— «içerir» ortayı da alır, fazla bağlantılar yanar- Sıradan görünüm için
.nameyerine[class] =nin tüm değeri istediğini unutmak —type="text"iletype="textbox"aynı değil- Öznitelik adlarını karıştırmak —
hreflang,hrefdeğildir
Özet
- Öznitelik seçici HTML öznitelikleri üzerinde
[ ]ile çalışır - Yalnızca ad = varlık;
== tam değer ^=baş,$=son,*=değerin herhangi bir yeri- Niyetinizi hâlâ söyleyen en dar işleci seçin
- Gerekirse seçiciye etiket adını da ekleyin
- Gerçek
hrefvetypeüzerinde pratik yapıp sayfayı yenileyin
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek