CSS: Sibling/Kardeş Seçici

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

PDF olarak oku

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

/* Kardeş Seçici:
   Aynı ebeveyne sahip sayfa
   elemanlarını seçmek
   için kullanılırlar.
*/

/*
   Aşağıdaki atamayla sayfa
   içinde aynı ebeveyne sahip
   p elemanından sonra gelen
   kardeş div sayfa eleman(lar)ı
   seçilecek ve tanımlanan stil
   tercihleri bu etiket(ler)e
   uygulanacaktır
*/
p + div {
    border: #000000 1px solid;
    font-size: 14px;
    font-weight: bold;
    text-decoration: underline;
    color: #cc0000;
    padding: 10px;
    width: 500px;
}

/*
   Aşağıdaki atamayla sayfa
   içinde aynı ebeveyne sahip
   kardeş p ve div elemanlarından
   sonra gelen kardeş p sayfa
   eleman(lar)ı seçilecek ve
   tanımlanan stil tercihleri
   bu etiket(ler)e uygulanacaktır
*/
p + div + p {
    font-size: 12px;
    font-weight: normal;

}

/*
   Aşağıdaki atamayla sayfa
   içinde aynı ebeveyne sahip
   kardeş p, div ve p elemanlarından
   sonra gelen kardeş div sayfa
   eleman(lar)ı seçilecek ve
   tanımlanan stil tercihleri
   bu etiket(ler)e uygulanacaktır
*/  

p + div + p + div {
    font-size: 11px;
    font-style: italic;
    color: gray;
}