CSS BİRLEŞİK SEÇİCİLER

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Ü

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 : 

• Span içindeki P etiketi

NOT : MAIN etiketinin torunu olan P etiketi , aynı zamanda SPAN etiketinin çocuğudur.. 

CSS

main>p { color:#f00; }

EKRAN GÖRÜNTÜSÜ

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Ü

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Ü

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..