CSS Birleştiriciler
CSS Birleştiriciler
Bir birleştirici, seçiciler arasındaki ilişkiyi açıklayan bir şeydir.
Bir CSS seçicisi, 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:
- soyundan gelen seçici (boşluk)
- çocuk seçici (>)
- komşu kardeş seçici (+)
- genel kardeş seçici (~)
Alt Seçici
Alt seçici, belirtilen 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:
Örnek
div p {
background-color: yellow;
}
Çocuk Seçici (>)
Alt seçici, belirtilen bir öğenin çocukları olan tüm öğeleri seçer.
Aşağıdaki örnek, bir <div> öğesinin alt öğeleri olan tüm <p> öğelerini seçer:
Örnek
div > p {
background-color: yellow;
}
Komşu Kardeş Seçici (+)
Bitişik kardeş seçici, doğrudan başka bir belirli öğeden sonra gelen bir öğeyi seçmek için kullanılır.
Kardeş öğeler aynı ana öğeye sahip olmalıdır ve "bitişik", "hemen takip eden" anlamına gelir.
Aşağıdaki örnek, <div> öğelerinden hemen sonra yerleştirilen ilk <p> öğesini seçer:
Örnek
div + p {
background-color: yellow;
}
Genel Kardeş Seçici (~)
Genel kardeş seçici, belirtilen bir öğenin sonraki kardeşleri olan tüm öğeleri seçer.
Aşağıdaki örnek, <div> öğelerinin sonraki kardeşleri olan tüm <p> öğelerini seçer:
Örnek
div ~ p {
background-color: yellow;
}
Tüm CSS Birleştirici Seçiciler
| Selector | Example | Example description |
|---|---|---|
| element element | div p | Selects all <p> elements inside <div> elements |
| element>element | div > p | Selects all <p> elements where the parent is a <div> element |
| element+element | div + p | Selects the first <p> element that are placed immediately after <div> elements |
| element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |