Birleştirici seçiciler elemanlar arasındaki ilişkiyi belirleyen css seçicileridir.
Bir seçici içerisindeki diğer elemanları, komşu ve çocuk elemenları seçebilmek için birleştirici css seçicileri kullanırız.
Birleştirici (Combinator) CSS Seçici Türleri
Alt Seçicler (Boşluk)
Bir HTML öğesi altındaki seçilmek istenen öğeleri belritmek için kullanılır.
HTML Kodu
CSS Kodu
Sonuç
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti accusantium rerum sapiente ad rem porro eligendi non eos error praesentium.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti accusantium rerum sapiente ad rem porro eligendi non eos error praesentium.
Burada .main classname'e sahip div öğesi içerisindeki p
elemanını stillendirmiş olduk.
Çocuk (>) Seçiciler
Bir HTML öğesinin hemen altındaki ilk hiyerarşiden gelen öğeleri seçmek için kullanılır. Seçilen öğelerin altındaki aynı tür elemanları farklı şekilde stillendirmek istiyorsak çocuk seçici >
kullanmak büyük fayda sağlayacaktır.
Örnek HTML Kodları
Örnek CSS Kodları
Sonuç
Komşu Kardeş Seçici (+)
Komşu kardeş seçiciler genellikle belirli bir öğeden sonra gelen aynı hiyerarşideki ilk öğeyi seçmek için kullanılır.
Aşağıdaki örenkte h4
öğesinden sonra gelen ilk p
öğesi seçilmektedir.
Örnek CSS Kodları
Sonuç
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, corrupti.
Örnek Başlık
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, corrupti.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, dolore.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, dolore.
Genel Seçici (~)
Genel seçici ~
ile bir öğeden sonra gelen tüm kardeş öğeler seçilebilir.
Örnek HTML Kodları
Örnek CSS Kodları
Sonuç
Div'den önce gelen "p" öğesi Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, provident?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, provident?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, provident?
span öğesiLorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, provident?