Özellik Seçicileri(Attribute Selectors)
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.
Ö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(örn:img) özelligine(örn:alt) göre tanımlama yapmamızı sağlar.
Bir örnek yapalım
<!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>
<meta http-equiv="Content-Type" content="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.
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
<!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>
<meta http-equiv="Content-Type" content="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
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
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>CSS'in yapısı</title>
<style type="text/css">
a[title~="Google"] {
text-decoration:overline;
}
</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.
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
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>CSS'in yapısı</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.
Internet Explorer 6.0: desteklemiyor 7.0: destekliyor ;
Firefox: destekliyor ;
Google Chrome: destekliyor ;
Opera: destekliyor
Bunların dısında CSS3 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ç CSS ve XHTML arasındaki iletisimi en üst seviyeye çıkararak kolay ve etkilesimli kod yazmamızı saglamak.
Hocam çok hayırlı bir iş yapıyorsunuz banada sizi bi tanıdığım önerdi siteniz her gece takip ediyorum her gece 1 tane ders uygulayark ben bu işi kavrıcam gibi.. :D çok teşşekürler..
[...] seçici tipleri ve kullanımı hakkında (X)HTML Sayfa Yapısı ve CSS Kullanımı, Özellik Seçicileri(Attribute Selectors) ve Sözde-sınıflar(Pseudo-class) ve Sözde-elementler(Pseudo-elements) makalelerini bir göz [...]
S.A hocam ben bu dersi okudum ve tümünün mantığını anladım sayılır fakat 2-basit örnek seçicisinde örnek vermişsiniz ama içinde class yok yani ordaki örnek bana göre Özellik Değeri Seçicisi örneği olmuş bu konuda aydınlatırsanız sevinirim yeni başladığım için kafam karıştı class örneği yok hiç ne olur acele cevap
Örneklerde bir sorun yok. Seçiciyi tanımladığım resimlerdekiler örnek değil, onları göstermek için kullandım, örnek kodlar ile onları bir alakası yok
2- Özellik Değeri Seçicisi konusunu anlamadım yani ne işe yarıyor kendimde denedim ama ne işe yaradığını anlamadım… Fatih hocam bunu açıklarsanız çok sevinirim kolay gelsin başarılarınıın devamını diliyorum…
çok güzel bir eğitim.katkılarınız için teşekkürler.
Bence çok daha fazla detaylandırılması gerekiyor :)
“İçinde Belirlenen Sözdizimi Geçen Özellik Değer Seçicisi” gibi asıl can alıcı konuları atlamışsınız.
Umarım yazının sonunda sadece isimlerini saymakla yetindiğiniz özellikleri de bir ara anlatırsınız.
yani rengin hmeen diğer renge değişmesi deilde yavaş bir şekilde değişmesi için bir kod vardı. O kodu burda paylaşabilirmisiniz hocam…
Bunu css ile değilde javascript ile yapabilirsiniz.
Hocam şimdi araştırdığım sitenizde bulamadığım bir konuyu size sormak istiyorum linklerin üstüne gelince renk vs. değiştiriyoruz ya o renk değiştirirken ağır değiştir gibi bir şey hatırlıyorum…
Merhaba Fatih Bey,
<asp:RadioButton />ve <asp:TextBox /> için 2.örneği uyguladığımda Internet Explorer' da çalışmıyor.
Çözümüyle ilgili bilginiz var mı?
Teşekkürler
ie 6 özellik seçicileri desteklemiyor.
7de kontrol ettim. Hatta şöyle bir karşılaştırma tablom var:)
http://web2.twitpic.com/img/24696085-0ca5d5406918…
Sanırım sorun <asp:TextBox /> ile ilgili:-/
Ben araştırmaya devam edeyim:)
İyi günler,
Style.cssde img[alt] { böyle yazmışsınız img'ye özellik atarken.Ben onun yerine sadece img { diye yazdım oldu acaba [alt] eklemenizin amacı nedir?
özellik seçicilerinin kullanımını göstermek amacı ile böyle bir örnek kullandık.