CSS - OF TYPE - PSEUDO (SÖZDE) SINIFLAR

Merhaba..

 CSS ile Parent elemanların  herhangi bir surasındaki elemanına özellik vermek istendiğinde CSS OF-TYPE 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-OF-TYPE

ONLY-OF-TYPE bir parent içindeki tek  olan   elemanları seçer. Yani parent içerisinde başka eleman olmamalıdır.  Herhangi bir eleman içinde tek  olan  elemana CSS özelliği uygulanır.  Uygulanacak seçicinin sonuna :only-of-type  ş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 eleman  olan P'lerin  rengi kırmızı olacak..  */
p:only-of-type { color:red; }

SONUÇ

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

:FIRST-OF-TYPE

FIRST_OF_TYPE bir parent içindeki belirtilen ilk elemanları seçer. Elemanın kaçıncı çocuk olduğu önemli değildir. Herhangi bir eleman içinde ilk bulunan elemana CSS özelliği uygulanır.  Uygulanacak seçicinin sonuna :first-of-type  şeklinde eklenir..  "p:first-of-type" 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 bulunan  P'lerin  rengi turuncu olacak..  */

p:first-of-type { color:orange; }

SONUÇ

Yukarıdaki HTML bloğuna göre , PARENTLAR içindeki ilk P'ler PARAGRAF 1 ve PARAGRAF 3'tür .. PARAGRAF 1 section içindeki ilk P iken , PARAGRAF 3 div içindeki ilk P elemanıdır. 

Seçicinin başında herhangi bir yer belritilmediği için syfadaki tüm P'ler değerlendirilmiş olur. Ancak sadece belirli bir eleman içindeki ilk P'yi bulmak istersek o zaman seçiciyi daraltmamız gerekir.. Örneğin CSS'te sadece DIV içindeki ilk P'ye özellik verirsek CSS kodumuz ve sonuç aşağıdaki gibi olacaktır..

CSS

/* DIV'lerde  ilk bulunan  P'lerin  rengi turuncu olacak..  */

div p:first-of-type { color:orange; }

SONUÇ

:LAST-OF-TYPE

LAST_OF_TYPE bir parent içindeki belirtilen son elemanları seçer. Elemanın kaçıncı çocuk olduğu önemli değildir. Herhangi bir eleman içinde son bulunan elemana CSS özelliği uygulanır.  Uygulanacak seçicinin sonuna :last-of-type  şeklinde eklenir..  "p:last-of-type" gibi...

HTML

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

CSS

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

p:last-of-type { color:orange; }

SONUÇ

Yukarıdaki HTML bloğuna göre , PARENTLAR içindeki son P'ler PARAGRAF 3 ve PARAGRAF 4'tür .. PARAGRAF 4  section içindeki son P iken , PARAGRAF 3 div içindeki   son P elemanıdır. 

Seçicinin başında herhangi bir yer belritilmediği için syfadaki tüm P'ler değerlendirilmiş olur. Ancak sadece belirli bir eleman içindeki son P'yi bulmak istersek o zaman seçiciyi daraltmamız gerekir.. Örneğin CSS'te sadece DIV içindeki son P'ye özellik verirsek CSS kodumuz ve sonuç aşağıdaki gibi olacaktır..

CSS

/* DIV'lerde  ilk bulunan  P'lerin  rengi turuncu olacak..  */

div p:last-of-type { color:orange; }

SONUÇ

DIV içindeki son P , PARAGRAF 4 olduğu için , sadece bu paragraf CSS özelliğinden etkilenir..

:NTH-OF-TYPE()  

:NTH-OF-TYPE( )  parantezi içerisine yazılan sayıdaki elemana ulaşmak için kullanılır.  Örneğin  nth-of-type(2) baştan 2. gelen elemanı  (2. sıradaki değil!)  belirtir. Bu durumda parent içinde en az 2 tane P olmalıdır.. 

Herhangi bir parent içinde istenilen sıradaki  elemanlara  CSS özelliği uygulanır.  Uygulanacak seçicinin sonuna :nth-of-type(x)   şeklinde eklenir..  "p:nth-of-type(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. bulunan P'lerin  rengi turuncu olacak..  */
p:nth-of-type(2) { color:orange; }
 

SONUÇ

Yukarıdaki HTML bloğuna göre;

Parentlar içinde 2  tane P kapsayan sadece SECTION  elemanı var.. Dolayısıyla  SECTION içindeki baştan 2. P etiketi yani PARAGRAF 2  CSS kodlarına göre turuncu olur..

:NTH-LAST-OF-TYPE()

:NTH-LAST-OF-TYPE( )  sınıfıda :NTH-OF-TYPE( ) sınıfında olduğu parantezi içerisine yazılan sayıdaki elemana ulaşmak için kullanılır.  Ancak bu kez  elemana  sondan ulaşılır.  Örneğin  nth-last-of-type(2) sondan 2. gelen elemanı  (sondan 2. sıradaki değil!)  belirtir. Bu durumda parent içinde en az 2 tane P olmalıdır.. 

Herhangi bir parent içinde istenilen sıradaki  elemanlara  CSS özelliği uygulanır.  Uygulanacak seçicinin sonuna :nth-last-of-type(x)   şeklinde eklenir..  "p:nth-last-of-type(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 sondan 3. bulunan   P'lerin  rengi mavi olacak..  */
p:nth-last-of-type(3) { color:skyblue; }

SONUÇ

Yukarıdaki HTML bloğuna göre;

Parentlar içinde 3  tane P kapsayan sadece SECTION  elemanı var.. Dolayısıyla  SECTION içindeki sondan 3. P etiketi yani PARAGRAF 1  CSS kodlarına göre mavi olur..

Görüşmek üzere..