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