CSS Özellik Seçicileri(Attribute Selectors)

**Ceybi** · 28 Ocak 2012, 02:54

[Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...]
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

[Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] 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 [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...], [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] 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
2
3
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(örn:img) özelligine(örn:alt) göre tanımlama yapmamızı sağlar.

Bir örnek yapalım
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<**** **********="Content-Type" *********"text/html; charset=utf-8" />
<title>CSS'in yapısı</title>
<style type="text/css">
img[alt] {
border: 5px solid lime
}
</style>
</head>
<body>
<img src="logo.gif" alt="Logo" width="32" height="41" />
</body>
</html>

Örneği görmek için tıklayınız.
Yukarıdaki kodlamada birden fazla <img> tanımı vardır. Ama biz sadece
alt tanımı yaptıklarımıza belli özellikler atamak istiyoruz. Bunun için Basit
Özellik Seçicisini kullanabiliriz.
Tarayıcı Uyumu: Internet Explorer 6.0: desteklemiyor 7.0: destekliyor ;
Firefox: destekliyor ;
Google Chrome: destekliyor ;
Opera: destekliyor

2- Özellik Değeri Seçicisi

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

Bir örnek yapalım
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<**** **********="Content-Type" *********"text/html; charset=utf-8"
/>
<title>CSS'in yapısı</title>
<style type="text/css">
input[type="text"] {
border: 1px solid #000;
width: 150px;
}
</style>
</head>
<body>
<p>Adınız : <input type="text" name="ad" /></p>
<p>Cinsiyetiniz: <input type="radio" name="cinsiyet" id="erkek" />
Erkek <input type="radio" name="cinsiyet" id="kadin" /> Kadın
</p>
</body>
</html>

Örneği görmek için tıklayınız.
Genelde formlarda tanımlama yaparken sadece metin girisi yaptıgımız alanlara atama yapmakta zorlanırız. Bunun sebebi <input> etiketini sadece metin girisi için kullanılmamasıdır, radyo buton ve isaretleme kutuları içinde bu etiketin kullanılmasıdır. Özellik Degeri Seçicisi bu sorunu kökten çözer. Yukarıdaki örnekte görüldügü gibi
Tarayıcı Uyumu: Internet Explorer6: desteklemiyor 7.0: destekliyor ;
Firefox: destekliyor ;
Google Chrome: destekliyor ;
Opera: destekliyor

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.

Bir örnek yapalım
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<**** **********="Content-Type" *********"text/html; charset=utf-8"
/>
<title>CSS'in yapısı</title>
<style type="text/css">
a[title~="Google"] {
text-decoration

verline;
}
</style>
</head>
<body>
<p><a href="http://www.google.com" title="Google seç">gooogle
</a> </p>
<p><a href="http://www.yahoo.com" title="Yahoo seç">yahoo </a>
</p>
<p><a href="http://www.fatihhayrioglu.com" title="Fatih">fatih </a>
</p>
</body>
</html>

Örneği görmek için tıklayınız.
Türkçe karakterde sorunsuz çalısıyor. Siz kullanabilecegimiz yerleri hesap
edin artık.
Tarayıcı Uyumu: Internet Explorer 6.0: desteklemiyor 7.0: destekliyor ;
Firefox: destekliyor ;
Google Chrome: destekliyor ;
Opera: destekliyor

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.

Bir örnek yapalım
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<**** **********="Content-Type" *********"text/html; charset=utf-8"
/>
<title>[Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...]</title>
<style type="text/css">
*[lang|="en"] {
color: red;
}
</style>
</head>
<body>
<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>
</body>
</html>

Örneği görmek için tıklayınız.
Tarayıcı Uyumu: Internet Explorer 6.0: desteklemiyor 7.0: destekliyor ;
Firefox: destekliyor ;
Google Chrome: destekliyor ;
Opera: destekliyor

Bunların dısında [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] ile birlikte gelen dört tane daha yeni Özellik Seçicisi vardır. “Belirlenen Sözdizimi ile Baslayan Özellik Deger Seçicisi”, “Belirlenen Sözdizimi ile Biten Özellik Deger Seçicisi”, “İçinde Belirlenen Sözdizimi Geçen Özellik Deger Seçicisi” ve Aduzayı Özellik Deger Seçicisi diye 4 adet yeni Özellik Seçicisi daha vardır. Amaç [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] ve[Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] arasındaki iletisimi en üst seviyeye çıkararak kolay ve etkilesimli kod yazmamızı saglamak.

28 Ocak 2012, 02:54	#1
Ceybi Mareşal Üyelik Tarihi: 12 Ocak 2012 Mesajlar: 789 Rep Puanı : 10 Rep Derecesi :	CSS Özellik Seçicileri(Attribute Selectors) [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] 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 [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] 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 [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...], [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] 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 2 3 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(örn:img) özelligine(örn:alt) göre tanımlama yapmamızı sağlar. Bir örnek yapalım 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <** ******="Content-Type" *****"text/html; charset=utf-8" /> <title>CSS'in yapısı</title> <style type="text/css"> img[alt] { border: 5px solid lime } </style> </head> <body> <img src="logo.gif" alt="Logo" width="32" height="41" /> </body> </html> Örneği görmek için tıklayınız. Yukarıdaki kodlamada birden fazla <img> tanımı vardır. Ama biz sadece alt tanımı yaptıklarımıza belli özellikler atamak istiyoruz. Bunun için Basit Özellik Seçicisini kullanabiliriz. Tarayıcı Uyumu: Internet Explorer 6.0: desteklemiyor 7.0: destekliyor ; Firefox: destekliyor ; Google Chrome: destekliyor ; Opera: destekliyor 2- Özellik Değeri Seçicisi Bir etiketin özellik değerine göre tanımlama yapmamızı sağlar. Bir örnek yapalım 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ******="Content-Type" *****"text/html; charset=utf-8" /> <title>CSS'in yapısı</title> <style type="text/css"> input[type="text"] { border: 1px solid #000; width: 150px; } </style> </head> <body> <p>Adınız : <input type="text" name="ad" /></p> <p>Cinsiyetiniz: <input type="radio" name="cinsiyet" id="erkek" /> Erkek <input type="radio" name="cinsiyet" id="kadin" /> Kadın </p> </body> </html> Örneği görmek için tıklayınız. Genelde formlarda tanımlama yaparken sadece metin girisi yaptıgımız alanlara atama yapmakta zorlanırız. Bunun sebebi <input> etiketini sadece metin girisi için kullanılmamasıdır, radyo buton ve isaretleme kutuları içinde bu etiketin kullanılmasıdır. Özellik Degeri Seçicisi bu sorunu kökten çözer. Yukarıdaki örnekte görüldügü gibi Tarayıcı Uyumu: Internet Explorer6: desteklemiyor 7.0: destekliyor ; Firefox: destekliyor ; Google Chrome: destekliyor ; Opera: destekliyor 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. Bir örnek yapalım 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ******="Content-Type" *****"text/html; charset=utf-8" /> <title>CSS'in yapısı</title> <style type="text/css"> a[title~="Google"] { text-decorationverline; } </style> </head> <body> <p><a href="http://www.google.com" title="Google seç">gooogle </a> </p> <p><a href="http://www.yahoo.com" title="Yahoo seç">yahoo </a> </p> <p><a href="http://www.fatihhayrioglu.com" title="Fatih">fatih </a> </p> </body> </html> Örneği görmek için tıklayınız. Türkçe karakterde sorunsuz çalısıyor. Siz kullanabilecegimiz yerleri hesap edin artık. Tarayıcı Uyumu: Internet Explorer 6.0: desteklemiyor 7.0: destekliyor ; Firefox: destekliyor ; Google Chrome: destekliyor ; Opera: destekliyor 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. Bir örnek yapalım 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ******="Content-Type" *****"text/html; charset=utf-8" /> <title>[Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...]*</title> <style type="text/css"> [lang\|="en"] { color: red; } </style> </head> <body> <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> </body> </html> Örneği görmek için tıklayınız. Tarayıcı Uyumu: Internet Explorer 6.0: desteklemiyor 7.0: destekliyor ; Firefox: destekliyor ; Google Chrome: destekliyor ; Opera: destekliyor Bunların dısında [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] ile birlikte gelen dört tane daha yeni Özellik Seçicisi vardır. “Belirlenen Sözdizimi ile Baslayan Özellik Deger Seçicisi”, “Belirlenen Sözdizimi ile Biten Özellik Deger Seçicisi”, “İçinde Belirlenen Sözdizimi Geçen Özellik Deger Seçicisi” ve Aduzayı Özellik Deger Seçicisi diye 4 adet yeni Özellik Seçicisi daha vardır. Amaç [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] ve[Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...] arasındaki iletisimi en üst seviyeye çıkararak kolay ve etkilesimli kod yazmamızı saglamak. Share Share this post on Digg Del.icio.us Technorati Twitter

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder
Stil
Normal Hybrid-Şeklinde gösterime geç Ağaç şeklinde gösterime geç

Sponsor Linkler (Lütfen Sitemize Destek Olmak İçin Günde Bir Kez Tıklayınız)