CSS - CHILD - PSEUDO (SÖZDE) SINIFLAR

Merhaba..

 CSS ile Parent elemanların  herhangi bir çocuğuna özellik vermek istendiğinde CSS CHILD SÖZDE SINIFLARI'ndan yararlanırız.. Bu sınıfların başına tüm PSEUDO sınıflarda olduğu gibi  " : " iki nokta üst üste işareti eklenir..

:ONLY-CHILD

ONLY-CHILD bir parent içindeki tek  çocuk olan   elemanları seçer. Eleman  çocuk olmalıdır ve Paret'ının içinde kendisinden başka çocuk olmamalıdır. Herhangi bir eleman içinde tek çocuk olan  elemana CSS özelliği uygulanır.  Uygulanacak seçicinin sonuna :only-child  şeklinde eklenir..  "p:only-child" gibi...

HTML

<section>
    <span> SPAN 1 </span>
    <p>PARAGRAF  1 </p>  
    <p> <span> PARAGRAF 2 </span>   
    <div>
         <p> PARAGRAF 3 </p>  
    </div>
    <p> PARAGRAF 4</p>  
</section> 

CSS

/* Parent'lardaki tek çocuk  olan P'lerin  rengi kırmızı olacak..  */
p:only-child { color:red; }

SONUÇ

Yukarıdaki HTML bloğuna göre , içinde sadece tek P çocuğu olan DIV etiketidir. Dolayısıyla sadece DIV içindeki  PARAGRAF 3 yazılan css özelliğinden etkilenecektir.

:FIRST-CHILD

FIRST-CHILD bir parent içindeki belirtilen ilk çocuk  elemanı seçer. Eleman ilk çocuk olmalıdır. Herhangi bir eleman içinde ilk çocuk olan  elemana CSS özelliği uygulanır.  Uygulanacak seçicinin sonuna :first-child  şeklinde eklenir..  "p:first-child" gibi...

HTML

<section>
    <span> SPAN 1 </span>
    <p>PARAGRAF  1 </p>  
    <p> <span> PARAGRAF 2 </span>   
    <div>
         <p> PARAGRAF 3 </p>  
    </div>
    <p> PARAGRAF 4</p>  
</section> 

CSS

/* Parent'lardaki ilk çocuk  P'lerin  rengi turuncu olacak..  */

p:first-child { color:orange; }

SONUÇ

Yukarıdaki HTML bloğuna göre , İlk çocuk konumunda olan tek P , DIV içinde olan PARAGRAF 3'tür. Dolayısıyla bu css özelliğinden sadece o etkilenir..

:LAST-CHILD

LAST-CHILD bir parent içindeki belirtilen son çocuk  elemanı seçer. Eleman son çocuk olmalıdır. Herhangi bir eleman içinde son çocuk olan  elemana CSS özelliği uygulanır.  Uygulanacak seçicinin sonuna :last-child  şeklinde eklenir..  "p:last-child" gibi...

HTML

<section>
    <span> SPAN 1 </span>
    <p>PARAGRAF  1 </p>  
    <p> PARAGRAF 2 </p>   
    <div>
         <span> SPAN 2 </span>
         <p> PARAGRAF 3 </p>
         <span> SPAN 3 </span>  
    </div>
    <p> PARAGRAF 4</p>  
</section> 

CSS

/* Parent'lardaki son çocuk  P'lerin  rengi turuncu olacak..  */

p:last-child { color:red; }

SONUÇ

Yukarıdaki HTML bloğuna göre , son çocuk konumunda olan tek P , section içindeki PARAGRAF 4'tür. Dolayısıyla bu css özelliğinden sadece o etkilenir..

:NTH-CHILD()  

:NTH-CHILD( )  parantezleri içerisine yazılan sıradaki  çocuğa ulaşmak için kullanıır. Örneğin  nth-child(2) baştan 2. çocuğu belirtir. 

Herhangi bir parent içinde istenilen sıradaki çocuk olan  elemanlara  CSS özelliği uygulanır.  Uygulanacak seçicinin sonuna :nth-child(x)   şeklinde eklenir..  "p:nth-child(2)" gibi...

HTML

<section>
    <span> SPAN 1 </span>
    <p>PARAGRAF  1 </p>  
    <p> PARAGRAF 2 </p>   
    <div>
         <span> SPAN 2 </span>
         <p> PARAGRAF 3 </p>
         <span> SPAN 3 </span>  
    </div>
    <p> PARAGRAF 4</p>  
</section> 

CSS

/* Parent'lardaki baştan 2. çocuk  P'lerin  rengi turuncu olacak..  */
p:nth-child(2) { color:orange; } 

SONUÇ

Yukarıdaki HTML bloğuna göre;

Baştan 2. çocuk olan 2 tane P var.. Biri SECTION içindeki PARAGRAF 1 , diğeri ise DIV içindeki PARAGRAF 3.. Dolayısıyla bu iki paragrafta CSS kodlarına göre turuncu olur..

:NTH-LAST-CHILD()

NTH-LAST-CHILD( ) sınıfıda nth-child() sınıfı gibi   parantezleri içerisine yazılan sıradaki çocuğa ulaşmak için kullanıır. Ancak nth-last-child() ile sıralama sondan sayılır. Örneğin  nth-last-child(3) sondan 3. çocuğu belirtir.

Herhangi bir parent içinde istenilen sıradaki çocuk olan  elemanlara  CSS özelliği uygulanır.  Uygulanacak seçicinin sonuna :nth-last-child(x)  şeklinde eklenir..  "p:nth-child(3)" gibi...

HTML

<section>
    <span> SPAN 1 </span>
    <p>PARAGRAF  1 </p>  
    <p> PARAGRAF 2 </p>   
    <div>
         <span> SPAN 2 </span>
         <p> PARAGRAF 3 </p>
         <span> SPAN 3 </span>  
    </div>
    <p> PARAGRAF 4</p>  
</section> 

CSS

/* Parent'lardaki sondan 3. çocuk  P'lerin  rengi mavi olacak..  */
p:nth-last-child(3) { color:skyblue; }

SONUÇ

Yukarıdaki HTML bloğuna göre;

Sondan 3. çocuk olan P ise bir tane var .. O'da SECTION içindeki PARAGRAF 2'dir.. Dolayısıyla bu  paragrafın reng,  CSS kodlarına göre skyblue (gök mavisi) olur..

Görüşmek üzere..