CSS: Child/Çocuk Seçici

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

PDF olarak oku

Kullanımı örneklendirilen child/çocuk seçicinin video derste yer alan kodu:

/* Çocuk Seçici:
   Bir ebeceyne sahip olan
   sayfa elemanlarını seçmek
   için kullanılırlar.
*/
/*
   Aşağıdaki atamayla sayfa
   içinde yer alan div sayfa
   elemanlarının çocuğu konumunda
   bulunan bütün p etiketleri
   seçilecek ve tanımlanan stil
   tercihleri bu etiketlere
   uygulanacaktır
*/
div > p {
    color: blue;
    font-weight: bold;
}

/*
   Aşağıdaki atamayla sayfa
   içinde yer alan, class özelliğine
   "islenmis" değeri almış sayfa
   elemanlarının çocuğu konumunda
   bulunan bütün li etiketleri
   seçilecek ve tanımlanan stil
   tercihleri bu etiketlere
   uygulanacaktır
*/  

.islenmis > li {
    color: red;
    font-weight: bold;
    text-decoration: underline;
}

/*
   Aşağıdaki atamayla sayfa
   içinde yer alan, id özelliğine
   "islenmemis" değeri almış sayfa
   elemanlarının çocuğu konumunda
   bulunan bütün li etiketleri
   seçilecek ve tanımlanan stil
   tercihleri bu etiketlere
   uygulanacaktır
*/  

#islenmemis > li {
    color: gray;
    font-weight: bold;
}