Iki toplulugu birlestiren tilde "~" isareti bir birlestiricidir.

CSS Kodu:

strong~li{color:green;background:back;}

Html Kodu:

<div>

       <strong>Haberler</strong>

       <li>Diyarbakir'da olay var</li>

</div>

Ayni soydan gelen elementlerin seçimini daha özele indirmemiz mümkün. Bunun için birlesik seçici gruplari olusturabiliriz.

CSS Kodu:

div>table tr>td p>strong{color:purple;}

Html Kodu;

<div>

<table>

<tr>

      <td><p>Ne Mutlu<strong>Türküm Diyene!</strong></p>

      </td>

</tr>

</table>

</div>

div>p

div>p>strong   seklinde bir baska elementin çocugu oldugu gösterilir.

CSS Kodu:

div>p{color:red;}

Html Kodu:

<div>

<p>Kuslar Uçuyor</p>

</div>

CSS Kodu:

div>p>strong{color:blue;}

Html Kodu:

<div>

<p>Uçan kuslari görmek için<strong>buraya tiklayiniz</strong></p>

</div>

Bir elementin diger elementleri kendi içerisinde barindirdigi yapiya soy denir. Ayni soydaki elementler benzer özelliklerini birbirlerine devrederler. Bu yapiya ait özellikleri üzerinden elementlere ulasmak için soy birlestirici adi verilen seçiciler tanimlanmistir.

CSS Kodu:

ul li {color:green;}

Html Kodu:

<ul>

       <li>Manzara Resimleri</li>

       <li>Komik Resimler</li>

</ul>

- Torunlari belirtmek için de iki tarafindan da bosluk karakteri olan yildiz (*) kullanilir.

CSS Kodu:

table * td{color:green;}

Html Kodu:

<table>

<tr>

      <td>Alis Nerede?</td>

</tr>

</table>

ile basliyorsa:[özellik^deger]

CSS Kodu:

div[id^="arka"]{background:orange;}

Html Kodu:

ile bitiyorsa: [özellik$=deger]

CSS Kodu:

div[id$="bahce"]{background:orange;} 

Html Kodu:

Içinde "deger" sözcügü geçenler: [özellik*="arka"]

CSS Kodu:div[id*="arka"]{background:black;} 

Html Kodu:

<div id="arka-bahce">Burasi arka bahçe</div>
<div id="on-bahce">Burasi on bahçe</div>