Özellik Seçicileri(Attribute Selectors)

[gokhanaygun]

Bu konuya biraz geç deðindik biliyorum. Ancak bu konuyu (X)HTML Sayfa Yapýsý ve CSS Kullanýmý makalesi içinde yazmayý düþündüðümde IE bu özelliði desteklemiyordu(þžimdi IE7 bu özelliði desteklemektedir.) bu nedenle yazýmýný ertelemiþtim, sonrada unuttum gitti açýkçasý neyse sonunda yazýyorum iþte

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.

Javascript gibi id’si olan her elemente(hata daha fazlasý da var) css özelliði atanmasý bize bir çok bakýmdan avantaj saðlar.

Ö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>
Türkçe karkaterde sorun çýkarmadý.

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>
Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0: desteklemiyor 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 7.0+: destekliyor


Bunlarýn dýþýnda CSS3 ile birlikte gelen dört tane daha yeni Özellik Seçicisi vardýr. "Belirlenen Sözdizimi ile Baþlayan Özellik Deðer Seçicisi", "Belirlenen Sözdizimi ile Biten Özellik Deðer Seçicisi", "Ýçinde Belirlenen Sözdizimi Geçen Özellik Deðer Seçicisi" ve Aduzayý Özellik Deðer Seçicisi diye 4 adet yeni Özellik Seçicisi daha vardýr. Bunlara daha sonra vakti geldiðinde deðineceðiz.

[Bur2]

paylaşım için tşkler

[firari]

tşkler...