Merhaba..
CSS temel seçicilerin dışında , sayfadaki tüm elemanlara ulaşmamızda bize esneklk ve kolaylık sağlayan bir çok farlı seçici kullanılabiliyor..
İÇ İÇE SEÇİCİ (A B)
Eğer bir eleman içindeki başka bir elemana CSS özellikleri vermek istersek bu yapıyı kulanmalıyız. Bunun için seçiciler arasında boşluk bırakılarak CSS özellikleri yazılır. Genelde bir seçiciye verilecek özelliğin bulunduğu yere özgü olması için tercih edilir. Örneğin SECTION etiketi içindeki P etiketlerine özellik atamak için seçici tanımı aşağıdaki gibi olacaktır...
HTML
<section>
<p> Paragraf 1 </p>
<p> Paragraf 2 </p>
<div>
<p> Paragraf 3 </p>
</div>
</section>
<p> Paragraf 4 </p>
CSS
section p { color:#f00; }
EKRAN GÖRÜNTÜSÜ
Paragraf 1
Paragraf 2
Paragraf 3
Paragraf 4
Bu tanımlamada sadece SECTION içinde bulunan tüm P etiketleri etkilenir. Sayfadaki diğer P etiketleri etkilenmez (Paragraf 4).
İç içe seçiciler sadece etiketlerle değil, class ve id seçicilerlede oluşturulabilir. Ayrıca iç içe seçici sayı sınırı yoktur. Örneğin aşağıda; nav içinde oluşturulmuiş ul listesinin içindeki li liste maddesinin kapsadığı a etiketi nin CSS özelliği yazılmış. (Genelde menüler için kullanılır.)
nav ul li a {
color:#f00; /* kırmızı yazı rengi */
}
ÇOCUK (CHILD) SEÇİCİ (A > B)
Eğer bir eleman içindeki ilk düzey (çocuk) eleman(lar)a CSS özellikleri vermek istersek bu yapıyı kulanmalıyız. Bir ana elamanın içindeki elemanlar o elemanın çocuğu olur. Eğer bu elemanların (çocukların) içinde başka elemanlar varsa bu kez de ana elemanın torunu olurlar. Çocuk seçici yapısı sadece çocukları seçecektir ( torunlar dahil olmaz ).
Çocuk seçiciler arada ">" büyük işareti kullanılarak belirtilir....
HTML
<main>
<p> Paragraf 1 </p> <!-- MAIN'in 1. çocuğu P-->
<span> <!-- MAIN'in 2. çocuğu SPAN -->
<p> Paragraf 2 </p> <!-- MAIN'in 1. torunu P -->
</span>
<p class="metin"> Paragraf 3 </p> <!-- MAIN'in 3. çocuğu P -->
<p class="yazi"> Paragraf 4 </p> <!-- MAIN'in 4. çocuğu P -->
</main>
Yukarıda MAIN etiketinin 4 çocuğu ve 1 torunu var.
MAIN Etiketinin Çocukları :
- ilk P etiketi ( pargraf 1)
- span etiketi
- .metin class'lı p etiketi ( paragraf 3)
- .yazi class'lı p etiketi ( paragraf 4)
MAIN Etiketinin Torunu :
NOT : MAIN etiketinin torunu olan P etiketi , aynı zamanda SPAN etiketinin çocuğudur..
CSS
main>p { color:#f00; }
EKRAN GÖRÜNTÜSÜ
Paragraf 1
Paragraf 2
Paragraf 3
Paragraf 4
Yukarıdaki CSS kodu ile MAIN'in tüm çocuk P'leri kırmızı olur. MAIN'in torunu olan paragraf 2 bu tanımdan etkilenmez..
SONRAKİ KARDEŞ SEÇİCİ (A + B)
Sonraki kardeş seçiciler , elemandan sonra gelen ilk kardeş elemanı seçmek için kullanılır. Seçicilerin mutlaka aynı etiket (PARENT) altında olmaları yani kardeş olmaları gerekir...
Kardeş seçiciler arada "+" artı işareti kullanılarak belirtilir..
HTML
<main>
<p> Paragraf 1 </p> <!-- MAIN'in 1. çocuğu P-->
<span> <!-- MAIN'in 2. çocuğu SPAN -->
<p> Paragraf 2 </p> <!-- MAIN'in 1. torunu P -->
</span>
<p class="metin"> Paragraf 3 </p> <!-- MAIN'in 3. çocuğu P -->
<p class="yazi"> Paragraf 4 </p> <!-- MAIN'in 4. çocuğu P -->
</main>
CSS
span + p { color:#f00; }
EKRAN GÖRÜNTÜSÜ
Paragraf 1
Paragraf 2
Paragraf 3
Paragraf 4
Yukarıda MAIN içinde bulunan P , SPAN , P.metin ve P.yazi etiketleri kardeş etiketlerdir.. span+p spandan sonraki ilk kardeş P 'yi tanımlar. Dolayısıyla html'de spandan sonra gelen ilk P , yani paragraf 3 bu özellikten etkilenir. Diğer kardeşler etkilenmez...
TÜM KARDEŞ SEÇİCİ (A ~ B)
Tüm kardeş seçiciler , elemandan sonra gelen tüm kardeş elemanı seçmek için kullanılır. Seçicilerin mutlaka aynı etiket (PARENT) altında olmaları yani kardeş olmaları gerekir..
Kardeş seçiciler arada "~" şapka işareti kullanılarak belirtilir..
HTML
<main>
<p> Paragraf 1 </p> <!-- MAIN'in 1. çocuğu P-->
<span> <!-- MAIN'in 2. çocuğu SPAN -->
<p> Paragraf 2 </p> <!-- MAIN'in 1. torunu P -->
</span>
<p class="metin"> Paragraf 3 </p> <!-- MAIN'in 3. çocuğu P -->
<p class="yazi"> Paragraf 4 </p> <!-- MAIN'in 4. çocuğu P -->
</main>
CSS
span ~ p { color:#f00; }
EKRAN GÖRÜNTÜSÜ
Paragraf 1
Paragraf 2
Paragraf 3
Paragraf 4
Yukarıda MAIN içinde bulunan P , SPAN , P.metin ve P.yazi etiketleri kardeş etiketlerdir.. span~p spandan sonraki tüm kardeş P'leri tanımlar. Dolayısıyla html'de spandan sonra gelen kardeşler paragraf 3 ve paragraf 4 bu özellikten etkilenir. Diğer kardeşler etkilenmez. (paragraf 1 ve paragraf 2).
Birleşik seçiciler sadece etiketlerle değil, class ve id seçicilerlede oluşturulabilir.
Görüşmek üzere..