CSS'te Özellik Seçiciler (Attribute Selectors)

CSS’te elementleri seçmek için birçok yöntem bulunur. Özellik seçiciler (attribute selectors), HTML elementlerini belirli bir özelliğe sahip olmalarına göre seçmemizi sağlayan bir CSS tekniğidir. Özellikle form elemanlarını biçimlendirmek için oldukça kullanışlıdır.

Bu yazıda özellik seçicilerinin ne olduğunu, nasıl kullanıldığını, ve hangi senaryolarda işimize yarayabileceğini açıklayacağız. Örneklerle konuyu daha anlaşılır hale getireceğiz.

Özellik Seçicisi Nedir?

CSS özellik seçicileri, HTML elementlerini belirli bir özelliğe ve değere sahip olup olmamalarına göre seçmemizi sağlar. Örneğin, button elemanlarının disabled özelliğine göre farklı biçimlendirmeler yapmak için kullanılabilir.

Bir HTML belgesinde birçok farklı button türü bulunabilir:

<button disabled>Gönder</button>
<button>İptal</button>
<button type="submit">Kaydet</button>

Bu durumda, yalnızca disabled özelliğine sahip olan butonu seçerek farklı bir stil vermek istersek şu şekilde bir CSS kullanabiliriz:

button[disabled] {
    background-color: gray;
    color: white;
}

Bu kod yalnızca disabled niteliğine sahip button elemanlarını etkiler. Diğer butonlar aynı kalır.

Özellik Seçici Kullanım Türleri

Özellik seçicilerini kullanmanın birkaç farklı yöntemi vardır. İşte en yaygın olanları:

1. Tam Eşleşme (`=`) Kullanımı

Eğer bir özelliğin belirli bir değere tam olarak eşleşmesini istiyorsak = operatörünü kullanırız.

a[target="_blank"] {
    text-decoration: underline;
}

Bu kod, yalnızca target="_blank" olan bağlantılara altı çizgili bir stil ekler.

2. İçeren (`*=`) Kullanımı

Bir özelliğin değerinin belirli bir kelimeyi içerip içermediğini kontrol etmek için *= operatörünü kullanabiliriz. Örneğin, src içeriğinde "logo" geçen tüm resimlere özel bir stil verebiliriz:

img[src*="logo"] {
    border: 3px solid black;
}

Eğer HTML’de şu şekilde bir resim varsa:

<img src="site-logo.png" alt="Site Logosu">

Bu resmin kenarlığı siyah olacaktır.

3. Başlangıç Karakteri (`^=`) Kullanımı

Eğer bir özelliğin belirli bir değerle başladığını kontrol etmek istiyorsak ^= operatörünü kullanırız. Örneğin, data- ile başlayan tüm özel veri içeren elementleri seçmek için:

div[data-info^="user"] {
    font-weight: bold;
}

Bu kod, data-info değeri "user" ile başlayan tüm <div> etiketlerini kalın yapar.

4. Bitiş Karakteri (`$=`) Kullanımı

Belirli bir değerle biten özellikleri seçmek için $= operatörünü kullanabiliriz. Örneğin, .jpg uzantısıyla biten tüm resimlere belirli bir stil uygulamak için şu kodu yazabiliriz:

img[src$=".jpg"] {
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}

Eğer HTML’de şu şekilde bir resim varsa:

<img src="fotoğraf.jpg" alt="Resim">

Bu resmin gölgesi olacaktır.

5. Belirli Bir Kelimeyi İçeren (`~=`) Kullanımı

Bir HTML elementinin özelliğinde belirli bir kelimenin tam olarak geçmesini istiyorsak ~= operatörünü kullanabiliriz. Örneğin, sınıf (class) değerleri arasında belirli bir kelimeyi aramak için kullanılabilir:

div[class~="highlight"] {
    background-color: yellow;
}

Eğer şu HTML koduna sahipsek:

<div class="article highlight">Öne Çıkan Yazı</div>

Bu div’in arka plan rengi sarı olur. Ancak class="article-highlight" gibi birleşik kelimelerde çalışmaz.

6. Belirli Bir Kelimeyle Başlayan (`|=`) Kullanımı

Bir özelliğin belirli bir kelimeyle başlamasını kontrol etmek için |= operatörünü kullanabiliriz. Özellikle dil seçimi gibi durumlarda kullanışlıdır:

p[lang|="fr"] {
    font-style: italic;
}

Bu kod, lang="fr" veya lang="fr-CA" gibi değerleri içeren <p> etiketlerini italik hale getirir.

Ne Zaman Kullanmalıyız?

Özellik seçicileri, özellikle form elemanları veya bağlantılar gibi belirli niteliklere sahip HTML öğelerini hedeflemek için oldukça yararlıdır. Ancak genellikle daha basit CSS seçiciler yeterlidir. Örneğin:

Bir sınıfa (class) sahip elementleri seçmek için: div.featured { ... }
Bir ID’ye (id) sahip elementleri seçmek için: #main-header { ... }

Bu yüzden özellik seçicilerini yalnızca gerçekten ihtiyaç duyduğumuzda kullanmalıyız.

Sonuç

Özellik seçicileri, HTML elementlerini belirli özelliklere göre seçmemizi sağlayan güçlü bir CSS aracıdır. Bu seçiciler sayesinde belirli button türlerini seçebilir, src veya href değerine göre elementleri biçimlendirebiliriz. Ancak, çoğu durumda daha basit CSS seçiciler (sınıf veya ID) daha verimli olacaktır.

Daha fazla bilgi için MDN Web Docs gibi kaynaklara göz atabilirsiniz. Eğer CSS öğrenmeye yeni başladıysanız, en çok kullanılan = operatörüyle başlamanızı öneririz. Diğerleri ise zamanla ihtiyaca göre kullanılabilir!