CSS, Attribute (Öz Nitelik) Seçiciler (Attribute Selectors)
HTML elementinin sahip olduğu herhangi bir özelliği biliyorsak bu durum o elemente sadece sahip olduğu Attribute (Öz Nitelik) değeri ile erişim sağlamak mümkünüdür. Fakat öz nitelik seçme işlemleri de kendi içerisinde 7 farklı alana ayrılmaktadır.
1) Sadece Attibute değeri bilinen elementi yakalama:
Eğer seçilmek istenilen elementin, Attibute değeri biliniyor fakat sahip olduğu "value" değeri bilinmiyorsa
<a href="https://bilimekseni.com">This page</a>[href]{
color: orange;
}Bu durumda yukarıdaki gibi bir işlem ile tüm href özelliğine sahip olan elementlere erişim sağlanır.
2) Hem Attribute hem de değeri biliniyorsa:
Bu durumda CSS ile hem Attibute değerini hemde "value" değerini aynı anda yazmamız yeterli olacaktır.
<input type="text">[type='text']{
width: 100%;
color: red;
}Attibute ve "value" değerinin net olarak bilindiği durumlarda kullanılması tavsiye edilir.
3) Attibute değeri biliniyor, "value" değerinin ise sadece bir kelimesi biliniyorsa
"value" içerisinde yer alan bir kelime biliniyorsa bu durumda sadece o kelimenin bulunduğu kısımları seçmek istiyorsak bu durumda kesinlikle kullanmalıyız.. İstinai durumlarda karşımıza çıkacak ve belki günü kurtacak olan bir seçim yöntemidir.
<h1 title="header">Title</h1> <!-- ❌ -->
<h1 title="true">Title</h1> <!-- ❌ -->
<h2 title="flower daily">blabla</h2> <!-- ✔️ -->
<span title="flowers"></span> <!-- ❌ -->
<h2 title="choose flower">blabla</h2> <!-- ✔️ -->;[title~='flower']{
color: red;
}Yukarıdaki örnekte title değeri içerisinde "flower" olan bütün elementleri seçer. Fakat yukarıdaki kullanımda kelime olması zorunludur! Eğer kelime "flower" yerine "flowers" olursa bu durumda seçme işlemi gerçekleşmeyecektir!
4) Attribute biliniyor, "value" değerin başlangıcı biliniyor
Her zaman karşımıza çıkan bir özellik değidir. Özellikle sayfa içerisinde birden çok dil kullanılıyorsa ve her bir dil için farklı özel renklendirmeler (tasarımlar) yapılmak isteniliyorsa kullanılabilir.
<h1 lang="en">All English</h1> <!-- ✔️ -->
<h1 lang="en-uk">United Kingdom</h1> <!-- ✔️ -->
<h1 lang="en-usa">United States</h1> <!-- ✔️ -->
<h1 lang="enginar">Meyve</h1> <!-- ❌ -->[lang|="en"]{
color: red;
}Yukarıdaki örnekte en ve en- ile başlayan bütün elementler seçilmiştir. Fakat "enginar" kısmı içerisindeki "en" kısmı seçilmemiştir!
5) Belirli bir elementin, belirli bir değerle başlangıç "value" değerini kontrol etme:
Özellikle "a" elementlerinde URL'in https veya http olması durumunu kontrol etmek maksatlı kullanılmaktadır. Eğer link güvenli ise yani HTTP ise bu durumda yeşil renkli değilse bu durumda kırmızı renkli olabilir.
<a href="http://bilimekseni.com">This Page</a> <!-- ❌ -->
<a href="https://bilimekseni.com">This page</a> <!-- ✔️ -->a[href^='https']{
color: red;
}Yukarıdaki örnekte "a" elementinin href attiribute özelliğinin "https" ile başlayıp başlamadığı kontrol edilmiştir.
6) Belirli bir elementin, belirli bir değerle bitiş "value" değerini kontrol etme:
5). maddede yazdığımız olan zıddı olarak düşünülebilir. Elementin, ilgili value değerinin başlangını değil bitişini kontrol eder.
<a href="http://bilimekseni.com/img/content/page.jpg">This Page</a>
<a href="https://bilimekseni.com/img/content/logo.png">This page</a>a[href$='.jpg']{
color: red;
}Yukarıdaki örnekte a elementinin, href Attribute özelliğinden, value değeri ".jpg" ile biten elementin seçilmesi istenilmektedir.
7. Belirli bir elementin, belirlenen attibute "value" değerinde bir kelimenin herhangi bir yerde geçmesi durumunu kontrol için
Bu durumda yine istisnai bir durumdur. Elimizde bir kelime var ve biz bu kelimenin ne başta ne de sonda geçip geçmediğini bilmiyoruz. Bu durumda heryerde olabilme ihtimali için:
<a href="http://bilimekseni.com/imgcontentpage.jpg">This Page</a>
<a href="https://bilimekseni.com/img/content/logo.png">This page</a>a[href*='content'] {
color: red;
}
Yukarıdaki örnekte aranan kelime "content" kelimesidir. Ve her iki element içerisinde de bulunduğundan kaynaklı olarak iki elementte başarılı bir şekilde seçilmektedir.
Böylelikle CSS içersindeki tüm Attribute (Öz Nitelik) seçicileri yazmış oluyoruz.
CSS'te bulunan diğer seçim türlerini görüntülemek için CSS'te Seçim Yöntemleri isimli ana yazımıza bakmanızı tavsiye etmekteyiz.