Hancı Eğitim

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:

1. 
   

   
   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.

1. 
   

   
   h1[class] {color:
   silver;}
   
   

2. 
   

   
   …
   

3. 
   

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

4. 
   

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

5. 
   

   
   <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.

1. 
   

   
   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.

1. 
   

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

2. 
   

   
   …
   
   

3. 
   

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

4. 
   

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

5. 
   

   
   <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.

1. 
   

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

2. 
   

   
   …
   
   

3. 
   

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

4. 
   

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

5. 
   

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

6. 
   

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

7. 
   

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