CSS’de ilk adım seçim yapmaktır. CSS, bize sağladığı özellik seçiciler ile bu seçme işlemini daha spesifik ve etiketlerin özelliklerine göre yapmamıza imkan tanır. Bazı durumlarda XHTML elementlerin özelliklerine göre seçim yapmak ihtiyacı duyabiliriz. Şu yazımda özellik seçicilerin pratikte nasıl kullanılabileceğini örneklemeye çalışmıştım.

XHTML içeriğimizi oluşturalım;

<a title="Anasayfa" href="#">Anasayfa</a>
<a title="Hakkımızda" href="#">Hakkımızda</a>
<a title="İletişim" href="#">İletişim</a>

CSS özellik seçiciler ile her linki ayrı ayrı seçebiliriz.

/*Bütün title özelliği olan linkleri seçtik*/
a[title] {
	color:red;
	text-decoration:none;
}

/* Sadece Anasayfa Linkini Seçtik*/
a[title="Anasayfa"]{
	color:green;
}

Yeni Bir örnek yaparak dosya uzantısına göre linklerimizi seçelim;

<a href="ornek.pdf">PDF Dosyası</a>
<a href="ornek.exe>EXE Dosyası</a>
<a href="ornek.rar">RAR Dosyası</a>
<a href="ornek.doc">WORD Dosyası</a>

Şimdi de CSS kodumuzu yazalım..

a[href$="pdf"]{ }
a[href$="exe"]{ }
a[href$="rar"]{ }
a[href$="doc"]{ }

Bu örnekte gördüğünüz gibi seçim yapabilmek için her linke ayrı sınıf(class) tanımlamamıza gerek yok. Uzantısına göre linkleri özellik seçiciler kullanarak seçebiliyoruz.

CSS özellik seçiciler küçük-büyük harf duyarlıdır.

Anlayalım

[attr] — attr özelliğine sahip bütün elementler seçilir (değerlerine bakılmaz).
örnek:<element attr=”oztecnic”></element> seçilir
örnek:<element attr =”fatihturan”></element> seçilir

[attr ="oztecnic"] — attr özelliği “oztecnic” olan bütün elementler seçilir.
örnek:<element attr=”oztecnic”></element> seçilir
örnek:<element attr=”fatihturan”></element> seçilmez

[attr ^="oztecnic"] — attr özelliği “oztecnic” ile başlayan bütün elementler seçilir.
örnek:<element attr=”oztecnic sen ne diyorsun?”></element> seçilir
örnek:<element attr=”sen oztecnic ne diyorsun?”></element> seçilmez

[attr$="oztecnic"] — attr özelliği “oztecnic” ile biten bütün elementler seçilir.
örnek:<element attr=”Konuşuyor yine oztecnic”></element> seçilir
örnek:<element attr=”oztecnic ne diyorsun sen?”></element> seçilmez

[attr *="oztecnic"] — attr özelliğinde “oztecnic” kelimesini en az bir kere geçen elementler seçilir.
örnek:<element attr=”Sen oztecnic ne diyorsun?”></element> seçilir
örnek:<element attr=”oztecnic’in sitesi burası”></element> seçilir
örnek:<element attr=”oztecnic.com’a hoş geldiniz!”></element> seçilir

[attr~="oztecnic"] — attr özelliğinde “oztecnic” kelimesi geçmeli ve ayrık durmalıdır.
örnek:<element attr=”Sen oztecnic ne diyorsun?”></element> seçilir
örnek:<element attr=”oztecnic’in sitesi burası”></element> seçilmez
örnek:<element attr=”oztecnic.com’a hoş geldiniz!”></element> seçilmez

[attr|="oztecnic"] — attr özelliğinde “oztecnic” kelimesi tireli(-) şekilde bulunmalı ve ilk gelen olmalıdır.
örnek:<element attr=”oztecnic-fatihturan”></element> seçilir
örnek:<element attr=”fatihturan-oztecnic”></element> seçilmez
örnek:<element attr=”oztecnic-”></element> seçilir
örnek:<element attr=”-oztecnic”></element> seçilmez

Sonuç
Özellik seçiciler sağladığı geniş seçim imkanlarıyla, arayüz kodlayıcılarının işlerini oldukça kolaylaştırıyor. Gereksiz sınıf ve ID tanımlamalarının önüne geçiyor. Önümüzdeki günlerde özellik seçicilerin pratikte nasıl kullanıldığına dair örneklerle devam edeceğiz…

Yorumlarınız için buyrun bakalım

Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.