Makaleye başlarken örnek bir kod bloğu oluşturalım. Bu kod bloğu üzerinden işaretleri anlatalım.
<div id="alan">
<div class="ozellik">
<p> 1. Alan</p>
<p> 2. Alan</p>
</div>
<p> 3. Alan</p>
<p> 4. Alan</p>
<p> 5. Alan</p>
</div>
# işareti:
Tanımlandığı etiketin idsine verilen komuttur. idler kimlik numarası gibidir. Bir sayfada aynı id'ye sahip birden fazla isim olamaz.
/** idsi alan olan etikete özellik ataması yapar*/
#alan{
border:1px solid red;
}
/** idsi alan olan divin içindeki
tüm p taglarına özellik ataması yapar*/
div#alan p{
color:red;
}
> işareti:
Aynı ebeveyne sahip etiketlerde 1. kademe alt etiketlere etki eder.
/** idsi alan olan divin içindeki
1. kademe p taglarına özellik ataması yapar
*/
div#alan > p {
background-color:bisque;
}
Yukarıdaki örnekte verdiğimiz 3., 4., 5. alanlara etki eder. 1. ve 2. alanlara etki etmez çünkü onlar 2. kademe altta oluyor.
+ işareti:
Aynı ebeveyne sahip etiketler ard arda gelenlerde +'dan sonra yazılana özellik ataması yapar. Aşağıdaki örneğin sonucunda sadece class'ı "özellik" olan divin hemen ardından gelen p etiketi olan "3. Alan" a etki eder.
/** aynı ebeveyne sahip div'den ve hemen sonrasında gelen p
etiketine özellik ataması yapar
*/
div + p {
color:coral;
font-size:32px;
}
~ işareti:
Aynı ebeveyne sahip etiketlerde 1. seçici ile 2. seçicinin + işaretinde olduğu gibi ard arda gelmesine gerek yoktur. Aynı hiyerarşideki 2. seçicilerin tümüne özellik ataması yapar.
Aşağıdaki örnekte 3,4,5. Alanlara etki edecektir.
/** aynı ebeveyne sahip 1. seçici ile
2. seçici ard arda gelmesine gerek yoktur.
2. seçiçinin tümüne özellik ataması yapar
*/
div ~ p{
color:green;
}
