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>

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>

ELEMENT SEÇICISI

Seçici olarak bütün XHTML elementlerini kullanabiliriz. Paragraf (<p>) elementini kullanacak olursak:

CSS Kodu:

p{font-family: Arial; color:orange; font-size:small; }

HTML Kodu:

<p> Elementimizi de böylece seçip renklendirdik. </p>

ID SEÇICISI

Bir elementin id bilgisine ait isimdir. Paragraf için id isimi belirlersek:

HTML Kodu:

<p id="baslik"> Hucre </p> 

CSS Kodu:

#baslik{font-family:Arial; color:orange; font-size:small; }

SINIF SEÇICISI {CLASS}

Birden fazla element ile kullanilabilinir. Örnegin;

CSS Kodu:

.baslik{font-family:Arial; color:orange; }

HTML Kodu:

<p class="baslik"> MARS </p>

<p class="baslik"> VENÜS </p>

<p class="baslik"> URANÜS </p>