CSS WEB

CSS Özellik Seçicileri (Attribute Selectors)

CSS, yalnızca öğe türünü göre değil, aynı zamanda öğelerin niteliksel değerlerini bildiren özelliklerine (özniteliklerine) dayalı bir seçim yapmanın ve stil hazırlamanın da bir yolunu sağlar.

Öznitelikler, HTML elementlerine ek bilgi sağlayan ifadelerdir. Örneğin;

Yukarıdaki HTML bildiriminde <img> web sayfanıza resim eklemeye yarayan bir HTML öğesidir. Tek başına kullanılmasının pek bir anlamı olmayabilir. Çünkü bir resim eklemek istiyorsanız mutlaka kaynağının hangi resim dosyası olacağının bildirilmesi gerekir. Belkide görüntülenememe ihtimaline karşı, basit bir kelime ile resimle ilgili küçük bir bilgi notu bildirmekte gerekir. İşte tam bu noktada <img> öğesine has özellikleri devreye almalısınız. Örneğimizde bulunan src ve alt özellikleri bunu sağlamaktadır. HTML öğelerinin bu türden özelliklerle destekleniyor olması sadece <img> ‘ye özgü bir durum değildir. Daha pek çok türden HTML öğelerinde bu türden özellik kullanımı görebilirsiniz.

CSS ile öğeleri seçmek için pek çok farklı yönden seçici kullanımı mevcuttur. CSS Seçicileri başlıklı yazımızda tüm bu seçicileri daha önce incelemiştik. Şimdi bunlara eklenen CSS Özellik Seçicileri (Attribute Selectors), HTML öğelerinin sahip olduğu özelliklere veya özellik değerlerine göre seçmenize olanak sağlayan yolları sunar. Özellik seçimi özel bir sözdizimine sahiptir. Özellik Seçicilerinin kullanım şekillerini ve sahip oldukları etkileri örnekleri üzerinden inceleyelim;

CSS [özellik] Seçicisi

Seçici, belirli bir özelliğe sahip olan öğeleri seçmek için kullanılır.

Örnek;

Aşağıdaki örnek, “title” özelliği bulunan tüm öğelerini seçer.

CSS öğe[özellik] Seçicisi

Özellik seçicilerini, bir öğe seçicisi ile belirtmekte mümkündür. Bu tür bir birlikte kullanım, belirli bir HTML öğesi ile kısıtlama yapma imkanı verir.

Örnek;

Aşağıdaki örnek, “title” özelliği bulunan tüm <a> öğelerini seçer;

CSS [nitelik = "değer”] Seçicisi

Seçici, belirli özellik değerlerine sahip öğeleri seçmek için kullanılır.

Örnek;

Aşağıdaki örnek, tüm <input> form öğelerinden type = “checkbox” nitelikli onay kutularını seçer.

Aşağıdaki örneğimizde içinde “menu” ifadesi geçen sınıflar seçilmekte ve stil uygulanmaktadır.

[…] […]

CSS Dersleri – Yazılım Bilişim Programlama için bir cevap yazın X