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