Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Combinators konusunu öğreneceğiz.
Bir birleştirici (combinators), seçiciler arasındaki ilişkiyi açıklayan bir yapıdır.Bir CSS seçici, birden fazla basit seçici içerebilir. Basit seçiciler arasına bir birleştirici ekleyebiliriz.
CSS'de dört farklı birleştirici vardır:
Torun seçici, belirli bir etiketin alt etiketleri olan tüm etiketleri seçer.Aşağıdaki örnek, div etiketlerinin içindeki tüm p etiketlerini seçer:
div p {
background-color: yellow;
}
Çocuk seçici, belirtilen bir elemanın çocukları olan tüm elemanları seçer.
Aşağıdaki örnek, bir div etiketinin çocukları olan tüm p etiketlerini seçer:
div > p {
background-color: yellow;
}
Komşu kardeş seçici, başka bir etiketin hemen ardından gelen bir etiketi seçmek için kullanılır.Aşağıdaki örnek, div etiketlerininden hemen sonra yerleştirilen ilk p etiketini seçer:
div + p {
background-color: yellow;
}
Genel kardeş seçici, belirtilen bir öğenin kardeşleri olan tüm öğeleri seçer.Aşağıdaki örnek, div etiketlerinin kardeşleri olan tüm p etiketlerini seçer:
div ~ p {
background-color: yellow;
}