CSS pseudo-classes bazı seçicilere özel efekt vermemizi sağlayan bir sınıftır. Bu verilen adın Türkçe açıklaması olmadığı ya da tam karşılanmadığı için orjinal ismini yazdım.. CSS içerisinde bazen özel efektlere ihtiyac duyarız.. Bunlar pseudo sınıfları içerisinde XHTML’e atayacağımız bazı seçicilerin kendi özelliklerinin dışına vurulmuş halidir.

Söz Dizimi

pseudo-classes söz dizimi şu şekilde oluşturulur;

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

Sınıflar da pseudo-classes içerisinde şu şekilde kullanılır;

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

Anchor Pseudo-classes

Sayfa içerisindeki linkler farklı tarayıcılara göre farklı gösterimleri mevcuttur.. Linklere özel anonim değerler eklenmedikçe şu şekilde CSS özelliği katılabilir;

a:link {color:#FF0000;}      /*ziyaret edilmemiş link */
 a:visited {color:#00FF00;}  /* ziyaret edilmiş link */
 a:hover {color:#FF00FF;}  /*mouse over linki */
 a:active {color:#0000FF;}  /* seçilen link */

Daha önceki derslerimizden de bildiğiniz gibi mouse over, linkin üzerine mouse ile gelinmesi demekti.

[message type="info"] a:hover özelliği , a:link ve a:visited CSS tanımlamalarından sonra gelmelidir.

a:active özelliği, a:hover CSS tanımlamasından sonra gelmelidir.

Pseudo-class isimleri büyük küçük harf duyarlısı değildir.[/message]

Pseudo-sınıfları ve CSS Sınıfları

Pseudo-sınıfları CSS sınıfları ile kombine edilebilir;

a.kirmizi:visited {color:#FF0000;}

<a href="css-dersleri.html">CSS Dersleri</a>

Yukarıdaki örnekte olan link eğer daha önce ziyaret edilmişse, link kırmızı görünecektir.

CSS First-chlild Pseudo-sınıfı

First-child den kastımız belirlenen seçici arasındaki ilk elemandır..Şöye bir örnekleme düşünülebilir, eğer iki adet paragraf elemanınız varsa ve bunların hergangi bir sınıfı yoksa, first-child özelliği ile ilk p elemanına etki edebilir, bu elemana çeşitli CSS özellikleri katabiliriz.Örnek;

 


 

 

jQuery ve CSS Dersleri.

jQuery ve CSS Dersleri.

 
 

Yukarıda iki adet p tag’i bulunuyor, lakin ilk p elemanı mavi renkte diğeri ise default değerindedir.

Şimdi de Bütün <p> elemanlarının ilk <i> elemanına etki edelim;

 


 

 

jQuuery ve CSS dersleri. jQuery ve  CSS dersleri

jQuuery ve CSS dersleri. jQuery ve   CSS dersleri

 
 

Yukarıdaki örneği göze alacak olursak birinci cümledeki CSS <i> tag’i mavi değeri almış fakat ikinci cümlelerdeki almamıştır.. Bu da yukarıda bahsedilen sadece <p> tag’leri içerisindeki ilk <i> elemanlarına etki ettiğimiz için oluşmuştur.

Şimdi de ilk <p> elemanının bütün <i> elemanlarına etki edelim;

 


 

 

jQuuery ve CSS dersleri. jQuery ve   CSS dersleri


jQuuery ve CSS dersleri. jQuery ve   CSS dersleri

 

 

Gördüğünüz gibi bu defa da ilk <p> elemanının bütün <i> elemanlarına etki etmiş olduk.. Yukarıda verdiğim örnekleri bir not defterinde .html kalıbında tarayıcınızda açarsanız daha iyi anlayacağınızı umuyorum.

Bütün Pseudo sınıflarına ait tablo aşağıdadır.

Pseudo-classes

Pseudo ismi	Açıklaması
:active	Eleman aktif olduğunda verilebilecek stil.
:first-child	Bir elemanın başka bir ilk elemanına stil verir.
:focus	Klawye odaklı bir stil ekler.
:hover	Belirlenen elemanın mouse ile üzerine gelindiğinde verilen stil.
:lang	Bir elemana belirlenen bir lang özelliği ekler.
:link	Ziyaret edilmemiş linklere stil verir.
:visited	Ziyaret edilmiş linklere stil verir.