css-combinators

Bir birleştirici, seçiciler arasındaki ilişkiyi açıklayan bir şeydir.
Bir CSS seçici birden fazla basit seçici içerebilir. Basit seçiciler arasında bir birleştirici içerebiliriz.
CSS'de dört farklı kombinasyon var:
torun seçici (boşluk)
çocuk seçici (>)
komşu kardeş seçici (+)
genel kardeş seçici (~)

Torun seçicisi
Soy seçici, belirtilen öğenin alt öğeleriyle eşleşen tüm öğeleri eşleştirir.
Aşağıdaki örnek, <div> öğelerindeki tüm <p> öğelerini seçer:
div p {
background-color: yellow;
}

Çocuk Seçici
Çocuk seçici, belirtilen öğenin hemen çocukları olan tüm öğeleri seçer.
Aşağıdaki örnek, bir <div> öğesinin hemen çocukları olan tüm <p> öğelerini seçer:
div > p {
background-color: yellow;
}

Komşu Kardeş Seçici
Bitişik kardeş seçici, belirtilen öğenin bitişik kardeşleri olan tüm öğeleri seçer.
Kardeş unsurların aynı ana öğeye sahip olması gerekir ve "bitişik", "hemen takip" anlamına gelir.
Aşağıdaki örnek, <div> öğelerinin hemen sonrasına yerleştirilen tüm <p> öğelerini seçer:
div + p {
background-color: yellow;
}

Genel Kardeş Seçici
Genel kardeş seçici, belirtilen öğenin kardeşi olan tüm öğeleri seçer.
Aşağıdaki örnek, <div> öğelerinin kardeşi olan tüm <p> öğelerini seçer:
div ~ p {
background-color: yellow;
}