CSS Dersleri 26 - Combinators (Birleştirici)


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 - descendant selector (space)
  • çocuk seçici - child selector (>)
  • komşu kardeş seçici - adjacent sibling selector (+)
  • genel kardeş seçici - general sibling selector (~)

Torun Seçici (Descendant Selector)

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 (Child Selector)

Ç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  (Adjacent Sibling Selector)

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 (General Sibling Selector)

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;
}

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 41 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 41 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla