CSS Birleştiriciler (Combinators)
CSS Birleştiriciler (Combinators) Nedir? CSS Birleştiriciler (Combinators) Nasıl Kullanılır? CSS Birleştiriciler (Combinators) Türleri Nelerdir?

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
Seçici | Örnek | Örnek Açıklaması |
---|---|---|
eleman eleman | div p | <div> öğelerinin içindeki tüm <p> öğelerini seçer. |
eleman>eleman | div > p | Üst öğesinin <div> olduğu tüm <p> öğelerini seçer. |
eleman+eleman | div + p | <div> öğelerinden hemen sonra gelen ilk <p> öğesini seçer. |
eleman~eleman | p ~ ul | Başında bir <p> öğesi bulunan her <ul> öğesini seçer. |
Tepkiniz Nedir?






