CSS Özellik Seçicileri

CSS ile tanımlama yaparken Xhtml nesnelerine erişmede bazen sıkıntı çekeriz. Ne yapsak da bu elemente atama yapsak diye bu genelde programcı - Arayüz Kod Yazarı ayrımının olduğu projelerde çok başımıza gelir. Bu sorunu kökünden çözen bir yöntemdir Özellik Seçicileri.

Özellik Seçicileri HTML, XHTML veya XML dokümanlarındaki seçilen etiketin özelliklerine veya özellik değerlerine göre tanımlama yapmamızı sağlar. Bir örnek verecek olursak sayfamızdaki bir resme(örn: grafik.gif) kenarlık ataması yapmak istersek:

img[src="grafik.gif"] { border: 1px solid #000; }

Dört çeşit Özellik Seçicisi vardır.

1- Basit Özellik Seçicisi

Belirli bir etiketin özelliğine göre tanımlama yapmamızı sağlar.

h1[class] {color: silver;}

…

<h1 class="selam">Selam</h1>

<h1 class="dunya">Dünya</h1>

<h1 class="ben">ben geldim </h1>

2- Özellik Değeri Seçicisi

Bir etiketin özellik değerine göre tanımlama yapmamızı sağlar.

img[src="grafik.gif"] { border: 1px solid #000; }

3- Kısmi Özellik Değeri Seçicisi

Bir etiketin özellik değerindeki boşluklarla ayrılmış kısımlarına göre tanımlama yapmamızı sağlar.

a[title~="seç"] {color:#000;;}

…

<a href="google.html" title="Google seç">gooogle </a>

<a href="google.html" title="Yahoo seç">yahoo </a>

<a href="google.html" title="Fatih">fatih </a>

4- Dikkate Değer Özellik Seçicisi

Bir etiketin özellik değerindeki kesik çizgi(-) ile ayrılmış kısımlarına göre tanımlama yapmamızı sağlar.

*[lang|="en"] {color: white;}

…

<h1 lang="en">Hello!</h1>

<p lang="en-us">Greetings!</p>

<div lang="en-au">G’day!</div>

<p lang="fr">Bonjour!</p>

<h4 lang="cy-en">Jrooana!</h4>