Kategoriler: Genel

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

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:

  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. <h1 class=”selam”>Selam</h1>
  3. <h1 class=”dunya”>Dünya</h1>
  4. <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. <a href=”google.html” title=”Google seç“>gooogle </a>
  3. <a href=”google.html” title=”Yahoo seç“>yahoo </a>
  4. <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.

  1. *[lang|=”en”] {color: white;}
  2. <h1 lang=”en”>Hello!</h1>
  3. <p lang=”en-us”>Greetings!</p>
  4. <div lang=”en-au”>G’day!</div>
  5. <p lang=”fr”>Bonjour!</p>
  6. <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.

Kaynaklar
Bul-Tikla

Son Yazılar

MEB Hizmet Bölgesi, Hizmet Alanı ve Hizmet Puanı Nedir?

MEB Hizmet Bölgesi, Hizmet Alanı ve Hizmet Puanı Millî Eğitim Bakanlığına bağlı öğretmenlerin atama ve…

5 saat ago

Okumak Nedir? – Türk Dili ve Edebiyatı

Okumak Nedir? OKUMAK NEDİR? Okumak; göz yöntemiyle algılanan işaret ve sembollerin ağız, burun, boğaz, geniz…

2 gün ago

Dinleme / İzleme Nedir? – Türk Dili ve Edebiyatı

Dinleme / İzleme Nedir? Kavram Olarak Dinleme / İzleme Dinleme / seyretme; ses, söz, gövde…

2 gün ago

İstiklal Marşımızın Yazılma Hikâyesi – Türk Dili ve Edebiyatı

İstiklal Marşımızın Yazılma Hikâyesi İSTİKLÂL MARŞI -Kahraman Ordumuza! Korkma, sönmez bu şafaklarda yüzen al sancak;Sönmeden…

2 gün ago

Acar Baltaş Kimdir, Hayatı ve Eserleri

Doğum Zamanı:1947Doğum Yeri:İstanbulMeslek:Psikolog, YazarAcar Baltaş Kimdir?Eğitim hayatına İstanbul Adam Lisesi’nde başlamış olan Baltaş, İstanbul Üniversitesi…

4 gün ago

10. Sınıf Türk Dili ve Edebiyatı Konu Özetleri

10. Derslik Türk Dili ve Edebiyatı Mevzu Özetleri 10. sınıf Türk Dili ve Edebiyatı dersine…

5 gün ago