CSS: Pseudo/Sözde Sınıflar

Hüseyin Akdogan tarafından yazıldı.   

PDF olarak oku

Bu video dersinde CSS’te Pseudo/Sözde Sınıflar‘ın kullanımını örneklendirmeye çalıştım. Derste yer alan stil tanımlamaları aşağıdaki gibidir:

/*
   Sözde Sınıflar:
   Sayfa elemanlarının dinamik olayları
   için yazılmış, sayfa elemanlarına etkileşim
   kazandırmak adına kullanılan sınıflardır.
*/

/*
   Aşağıdaki atamayla sayfa içinde
   yer alan ziyaret edilmemiş
   anchor etiketleri seçilecek,
   tanımlanan stil tercihleri
   uygulanacaktır
*/
a:link     { color:blue; text-decoration:none; font-weight: bold;}

/*
   Aşağıdaki atamayla sayfa içinde
   yer alan ziyaret edilmiş
   anchor etiketleri seçilecek,
   tanımlanan stil tercihleri
   uygulanacaktır
*/
a:visited  { color:gray; text-decoration:underline; font-weight: bold;}

/*
   Aşağıdaki atamayla sayfa içinde
   yer alan ve mouse üzerine gelen
   anchor etiketleri seçilecek,
   tanımlanan stil tercihleri
   uygulanacaktır
*/
a:hover    { color:red; text-decoration:underline; font-weight: bold;}

/*
   Aşağıdaki atamayla sayfa içinde
   yer alan ve mouse click olayı
   gerçekleşmiş anchor etiketi seçilecek,
   tanımlanan stil tercihleri uygulanacaktır
*/
a:active   { color:green; text-decoration:underline; font-weight: bold;}

/*
   Aşağıdaki atamayla sayfa içinde
   yer alan ve mouse üzerine gelen
   li etiketi seçilecek ve
   tanımlanan stil tercihleri
   uygulanacaktır
*/
li:hover {
    background-color: blue;
    color: yellow;
}

/*
   Aşağıdaki atamayla sayfa içinde
   yer alan ve mouse click olayı
   gerçekleşmiş li etiketi seçilecek,
   tanımlanan stil tercihleri uygulanacaktır
*/
li:active {
    background-color: red;
    color: white;
}

/*
   Aşağıdaki atamayla sayfa içinde
   yer alan li elamının ilk çocuğu
   seçilecek, tanımlanan stil tercihleri
   uygulanacaktır
*/
li:first-child {
    text-decoration: underline;
}