CSS: Attribute/Özellik Seçici

Hüseyin Akdogan tarafından yazıldı.   

PDF olarak oku

Bu video dersinde CSS’te Attribute/Özellik seçicilerin kullanımını örneklendirmeye çalıştım. Derste yer alan stil tanımlamaları aşağıdaki gibidir:

/* Özellik Seçici:
   HTML/XHTML etiketlerini
   özelliklerine, bu
   özelliklerin aldığı
   değerlere göre seçmek
   için kullanılırlar.
*/  

/*
   Aşağıdaki atamayla sayfa
   içinde title özelliğine
   değer almış/onu kullanmış
   dt eleman(lar)ı seçilecek
   ve tanımlanan stil
   tercihleri bu etiket(ler)e
   uygulanacaktır
*/  

dt[title]{
    font-weight: bold;
    padding: 5px 0px;
}

/*
   Aşağıdaki atamayla sayfa
   içinde title özelliğine
   "basit" değeri almış
   dt eleman(lar)ı seçilecek
   ve tanımlanan stil
   tercihleri bu etiket(ler)e
   uygulanacaktır
*/
dt[title="basit"]{
    color: red;
}

/*
   Aşağıdaki atamayla sayfa
   içinde title özelliğine
   aldığı değerde "kismi"
   ifadesi yer alan
   dt eleman(lar)ı seçilecek
   ve tanımlanan stil
   tercihleri bu etiket(ler)e
   uygulanacaktır
*/
dt[title*="kismi"]{
    color: blue;
}

/*
   Aşağıdaki atamayla sayfa
   içinde title özelliğine
   aldığı değerin başında
   "kismi" ifadesi yer alan
   dt eleman(lar)ı seçilecek
   ve tanımlanan stil
   tercihleri bu etiket(ler)e
   uygulanacaktır
*/
dt[title^="kismi"]{
    color: blue;
}

/*
   Aşağıdaki atamayla sayfa
   içinde title özelliğine
   aldığı değerin sonunda
   "kismi" ifadesi yer alan
   dt eleman(lar)ı seçilecek
   ve tanımlanan stil
   tercihleri bu etiket(ler)e
   uygulanacaktır
*/
dt[title$="kismi"]{
    color: blue;
}