CSS kombinatörleri

CSS kombinatörleri

Kombinatörler, seçiciler arasındaki ilişkiyi açıklayan bir mekanizmadır.

CSS seçicileri, basit seçiciler arasında birden fazla kombinatör içerebilir.

CSS'te dört farklı bileşici vardır:

  • Arka çizgi seçicisi (boşluk)
  • Alt seçicisi (>)
  • Yakın kardeş seçicisi (+)
  • Genel kardeş seçicisi (~)

Arka çizgi seçicisi

Arka çizgi seçicisi, belirtilen öğenin tüm arka çizgi öğelerini eşleştirir.

Aşağıdaki örnekte, <div> öğesinin içındaki tüm <p> öğeleri seçilir:

Örnek

div p {
  background-color: yellow;
}

Kendiniz deneyin

Alt seçicisi

Alt seçicisi, belirtilen öğenin tüm alt öğelerini eşleştirir.

Aşağıdaki örnekte, <div> öğesinin tüm alt öğeleri olan <p> öğeleri seçilir:

Örnek

div > p {
  background-color: yellow;
}

Kendiniz deneyin

Yakın kardeş seçicisi

Yakın kardeş seçicisi, belirtilen öğenin yakın eşit düzeydeki tüm öğelerini eşleştirir.

Kardeş (eşit düzey) öğeleri aynı ebeveyn öğesine sahip olmalıdır, 'yakın' kelimesi 'hemen ardından' anlamına gelir.

Aşağıdaki örnekte, <div> öğesinin hemen ardından gelen tüm <p> öğeleri seçilir:

Örnek

div + p {
  background-color: yellow;
}

Kendiniz deneyin

Genel kardeş seçicisi

Genel kardeş seçicisi, belirtilen öğeye ait eşit düzeydeki tüm öğeleri eşleştirir.

Aşağıdaki örnekte, <div> öğesinin eşit düzeydeki tüm <p> öğeleri seçilir:

Örnek

div ~ p {
  background-color: yellow;
}

Kendiniz deneyin

Tüm CSS bileşik seçiciler

Seçici Örnek Örnek açıklama
element element div p Tüm <div> öğesinin içındaki tüm <p> öğelerini seçin。
element>element div > p Anavatörü <div> elemanı olan tüm <p> elemanlarını seçin.
element+element div + p Her <div> elemanının ardından gelen <p> elemanlarını seçin.
element1~element2 p ~ ul Her <p> elemanının önünde <ul> elemanı olan her <ul> elemanı seçin.

Genişletilmiş Okuma

Ders Kitabı:CSS Çocuk Seçici

Ders Kitabı:CSS Çocuk Eleman Seçici

Ders Kitabı:CSS Komşu Kardeş Seçici