CSS Öznitelik Seçicileri - Attribute Selectors

HTML/XHTML etiketlerimizin/elemanlarımızın içine yazdığımız özniteliklere de (title, type vs) CSS ile stil verebiliriz. Özniteliğe verdiğimiz stil, etiketi/elemanı da etkliyecektir. Öznitelikleri CSS dosyasında " [ " ve " ] " işaretleri arasında yazacağız.

[title] {
    color:orange;
}

Yukarıda ki kod CSS dosyamızda olduğunda içinde title özniteliği bulunan bütün etiketlerin metin rengi turuncu olacaktır.

Öznitelik ve Değer Seçicisi

Bu özellikte ise özniteliği değeri ile birlikte veriyoruz. Amacımız sadece istediğimiz değere sahip olan özniteliğe stil vermek.

[title=SercanEraslan] {
     background-color:yellow;
}

Yukarıda ki kod sadece title değeri "SercanEraslan" olan etiketlerin arkaplan rengini sarı yapacak.

Öznitelik ve Değer Seçicisi - Çoklu Kullanım

Bu özellikte birden fazla öznitelik ve değer kullanımını göreceğiz. Bunun için " ~ " işaretini kullanacağız.

[title~=SercanEraslan] {
     color:green;
}

Yukarıda ki kod, title 'ında "SercanEraslan" geçen bütün etiketlerin metin rengini yeşil yapacak.

Form Özniteliklerine Stil Verme

input[type="button"] {
     height:50px;
}

Yukarıda ki kod, type özniteliği "button" olan bütün input 'ların yüksekliğini 50 piksel yapacaktır.