CSS Birleştiriciler (Combinators)

CSS Birleştiriciler (Combinators)

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:

• Alt seçici (Descendant selector) (Boşluk)
• Çocuk seçici (Child selector) (>)
• Bitişik kardeş seçici (Adjacent sibling selector) (+)
• Genel kardeş seçici (General sibling selector) (~)

Alt Seçici (Descendant Selector) (Boşluk)

Alt seçici, belirli bir öğenin alt öğeleri olan tüm öğelerle eşleşir.

Aşağıdaki örnek, <div> öğelerinin içindeki tüm <p> öğelerini seçer.

div p {
  background-color: yellow;
}

Çocuk Seçici (Child Selector) (>)

Çoçuk seçici, belirtilen bir elemanın çocukları olan tüm elemanları seçer.

Aşağıdaki örnek, bir <div> öğesinin çocukları olan tüm <p> öğelerini seçer.

div > p {
  background-color: yellow;
}

Bitişik Kardeş Seçici (Adjacent Sibling Selector) (+)

Bitişik kardeş seçici, başka bir belirli öğenin hemen ardından gelen bir öğeyi seçmek için kullanılır.

Kardeş öğeler aynı ana öğeye sahip olmalıdır.

Aşağıdaki örnek, <div> öğelerinden hemen sonra yerleştirilen ilk <p> öğesini 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> öğelerinin kardeşleri olan tüm <p> öğelerini seçer.

div ~ p {
  background-color: yellow;
}

Tüm Birleştirici Seçiciler