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
<div class="main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti accusantium rerum
sapiente ad rem porro eligendi non eos error praesentium.</p>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti accusantium rerum
sapiente ad rem porro eligendi non eos error praesentium.</p>
CSS Kodu
div.main{
padding:20px;
margin:20px;
background-color:red;
}
div.main p{
color:#fff;
font-size:20px;
text-align:center;
}
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ı
<ul class="example">
<li><a href="#">1. Seviye a Elemanı</a>
<ul>
<li><a href="#">2. Seviye a Elemanları Seçilmeyecek.</a></li>
<li><a href="#">2. Seviye a Elemanları Seçilmeyecek.</a></li>
<li><a href="#">2. Seviye a Elemanları Seçilmeyecek.</a></li>
</ul>
</li>
<li><a href="#">1. Seviye a Elemanı</a></li>
<li><a href="#">1. Seviye a Elemanı</a></li>
<li><a href="#">1. Seviye a Elemanı</a></li>
</ul>
Örnek CSS Kodları
ul.example{
list-style:none;
padding:20px;
}
ul.example > li > a{
background-color:red;
color:#fff;
font-size:20px;
padding:10px;
display:inline-block;
}
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.
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, corrupti.</p>
<h6>Örnek HTML Kodları</h6>
<h4 class="myTitle">Örnek Başlık</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, corrupti.</p>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, dolore.</p>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, dolore.</p>
Örnek CSS Kodları
h4.myTitle+p{
background-color:blue;
padding:10px;
color:#fff;
font-size:20px;
}
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ı
<p>Div'den önce gelen "p" öğesi Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Ipsum,
provident?</p>
<div class="example1">
<span>Div Öğesi</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, provident?</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, provident?</p>
<span>Span Öğesi</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, provident?</p>
Örnek CSS Kodları
div.example1 {
border: 2px solid red;
padding: 15px;
}
div.example1~p {
background-color: yellow;
color: red;
font-weight: bold;
font-size: 18px;
padding: 10px;
}
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?