CSS Seçiciler: Özellik Seçiciler
Özellik seçiciler genel seçicilerin tam tersidir. Bir html elemanının belli bir özelliğini hedef alarak işlem görür. Mesela üç adet input varsa bunlardan ikisinin değeri text diğerininki submit ise bir sadece submit olanı seçebiliriz.
Örnek vermek gerekirse:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
input[type="text"] {color:red;}
input[type="submit"] {color:blue;}
</style>
</head>
<body>
<input type="text">
<input type="submit">
</body>
</html>
1-Belirlenen Sözdizimi ile Başlayan Özellik Değer Seçicisi
Bu tip seçiciler belirtilen tüm html elemanını seçmek yerine … İle başlayan şeklinde ayrıntılı seçim yapabilmemizi sağlar. Bu seçicinin işareti ise ( ^ ) şapkadır.
<a href="http://www.birwebdesign.com">Web Site Adresi</a>
<a href="mailto: bilgi@birwebdesign.com bilgi@birwebdesign.com</a>
<a href="ftp://birwebdesign.com">Ftp Adresi</a>
Yukarıda 3 farklı bağlantı şeklimiz var. Bu bağlantı şekillerine css ile ayrı ayrı özellik tanımlamak istiyoruz ama hepsine class özelliği eklemek uzun ve zahmetli bir iş ve fazladan da kod yükü oluyor. O halde bu işlemi sadece css’de , html içerisinde herhangi bir tanımlama yapmadan halledebiliriz.
a[href^='http'] { color:red }
a[href^='mailto'] { color:blue }
a[href^='ftp'] { color:yellow }
örnekte görüldüğü gibi linklerin başlangıcına göre değerler verebiliyoruz ve HTML dosyası içerisinde herhangi bir class tanımlaması da yapmadık.
2-Belirlenen Sözdizimi ile Biten Özellik Değer Seçicisi
Bu özellik bir önceki özellikle aynı mantığa sahiptir fakat bundaki olay sadece başlangıç değeri sözdizimi değil bitiş söz dizimi önemlidir. Seçici için dolar işareti ( $ ) kullanılır.
<a href="http://www.birwebdesign.com/deneme.rar">Rar Dosyası</a>
<a href="http://www.birwebdesign.com/deneme.jpg">JPG Resim Dosyası</a>
<a href="http://www.birwebdesign.com/deneme.xls">XLS Office Belgesi</a>
Yukarıda bir web sitesinde bulunan 3 farklı uzantıda bağlantı mevcut. Bu bağlantılara ayrı ayrı özellikler vermek istiyorsunuz. Bunu CSS3’ün başlangıç sözdizimi özelliği ile yapamayız çünkü hepsi https:// ile başlıyor. Bitiş sözdizimi yöntemini kullanarak uzantılara göre css değerleri atayabiliriz.
a[href$='.pdf'] { background -color:red };
a[href$='.doc'] { background-color: blue; }
a[href$='.rss'] { background-color: yellow; }
3-İçinde Belirlenen Sözdizimi Geçen Özellik Değer Seçicisi
Belirli bir sözdizimini html elamnının etiket değerlerinden seçip, css uygulamasını yapan seçici tipidir. Bu sözdizimini belirtmek için yıldız ( * ) işareti kullanılmaktadır. Kullanım alanı oldukça geniştir.
<input type="text" placeholder="sözdizimi">
<input type="text" placeholder="css3">
Yukarıda iki adet input vardır ve placeholder değerleri farklıdır. Biz bir tanesine değer vermek sitediğimizde class yazmak zorundayız ya da CSS3 ile gelen, içinde belirlenen sözdizimi geçen özellik uygulamasını kullanabiliriz.
İnput[placeholder="söz”] {border:1px solid #ff0022}
Verilen örnekte placeholder değeri içerisinde “ söz “ geçen tüm input elemanlarının border özelliğini tanımlamış olduk.
4-Çoklu Özellik Seçicisi Kullanımı
Tıpkı farklı class’ları tek bir html elemanında kullanabildiğimiz gibi özellik seçicileri de tek bir css değerinde kullanabiliriz.
strong[class=”normal”] a[title~=link] {
color : red;
}
Sonraki Konumuz Genel Kardeş Seçiciler Olacaktır.
