CSS Sözde Sınıflar - Pseudo-Classes

pseudo-class Yazım Kuralı

Aslında Pseudo-Class (Poseydo Kılas) 'ın ne olduğunu daha önce CSS altında ki Linkler başlığında görmüştük. Linklere stil verirken bu özelliği kullanıyorduk.

Pseudo-Class yazım kuralını görelim.

seçici:pseudo-class {özellik:değer;}

Örnek:

a:link {background-color:#FFFF85;}

Class ile birlikte Pseudo-Class kullanımını görelim.

seçici.class:pseudo-class {özellik:değer;}

Örnek:

p.ozel_stil:pseudo-class {background-color:#FFFF85;}

first-child Sözde Sınıf

Örneğin bir div etiketimizin içinde 5 tane p etiketi var ve biz ilk sırada ki p etiketine stil vermek istiyoruz ama HTML/XHTML koduna dokunmadan kısa sürede CSS ile bu işi halletmek istiyoruz. Bu gibi durumlarda first-child özelliğini kullanabiliriz. Yani biz bir elemanın altında ki ilk elemana stil vermek için first-child özelliğini kullanacağız.

CSS Kodumuz:

p:first-child {color:gray;}

( Kodun okunuşu: İlk p elemanının metin rengi gri olsun. )

HTML/XHTML Kodu

<div>

      <p> Bu birinci paragraf </p>
      <p> Bu ikinci paragraf </p>
      <p> Bu üçüncü paragraf </p>
      <p> Bu dördüncü paragraf </p>
      <p> Bu beşinci paragraf </p>

</div>

Bu kodumuz çalıştığında ilk paragrafta ki içeriğin rengi gri olacak, diğer paragraflar ise olduğu gibi kalacaktır.

Bir elamanın altında ki tüm ilk elemanlara stil vermek

Örneğin iki adet div etiketimiz var ve her etiketimizin içinde 2 tane strong etiketimiz var. Biz ilk strong elemanlarına tek tek stil vermek yerine tek seferde CSS ile stil vererek kodumuzu kısaltmak istiyoruz.

CSS Kodumuz:

div > strong:first-child {color:blue;}

( Kodun okunuşu: div elemanının altında ki ilk strong etiketlerinin metin rengi mavi olsun. )

HTML/XHTML Kodu

<div>

<strong> Bu vurgulu ve mavi bir metin. </strong> <strong> Bu ise vurgulu bir metin. </strong>

</div>

<div>

<strong> Bu vurgulu ve mavi bir metin. </strong> <strong> Bu ise vurgulu bir metin. </strong>

</div>

İlk elamanın içinde ki elemanların tümüne stil vermek

Örneğin iki adet div etiketimiz var ve her etiketimizin içinde 2 tane strong etiketimiz var. Biz ilk div etiketi içinde ki tüm strong elemanlarına tek tek stil vermek yerine tek seferde CSS ile stil vererek kodumuzu kısaltmak istiyoruz.

CSS Kodumuz:

div:first-child strong {color:blue;}

( Kodun okunuşu: İlk div elemanının içinde ki tüm strong etiketlerinin metin rengi mavi olsun. )

HTML/XHTML Kodu

<div>

<strong> Bu vurgulu ve mavi bir metin. </strong> <strong> Bu vurgulu ve mavi bir metin. </strong>

</div>

<div>

<strong> Bu vurgulu bir metin. </strong> <strong> Bu vurgulu bir metin. </strong>

</div>