CSS pseudo class element kavramı

CSS pseudo-class ve pseudo-elements CSS’i destekleyen web tarayıcıları tarafından otomatik olarak tanınan (x)html hiyerarşisi ile erişemediğimiz element ve sınıflara erişmemizi sağlayan özel sınıf ve elementler olarak adlandırılmaktadır.

pseudo sınıfı bir elementi farklı sınıflara böler. pseudo elementi ise bir elementi alt kısımlara bölmektedir.

pseudo sınıf ve elementleri HTML class özelliği olarak belirtilmemiştir. Normal sınıflar pseudo sınıf ve elementleri ile kullanılabilir.

a.linkler:link, a.linkler:visited {
    color: #0000ff;
}

Pseudo Sınıfları 

Link Pseduo Sınıfıları ve Dinamik Pseudo Sınıfları olmak üzere ikiye ayrılır:

Link Pseudo Sınıfları

Yanlızca linklere uygulanan iki tane Link Pseduo sınıfı vardır.

 :link : Ziyaret edilmemiş sayfanın linkine stil tanımlaması yapmak için kullanılır. 

 :visited : Henüz ziyaret edilmiş sayfa linklerine stil tanımlaması yapmak için kullanılır.

a:link {
    color: #0000ff;
}

a:visited {
    color: #ff0000;
}

Dinamik Pseudo Sınıfları

Dinamik Pseudo Sınıfları sayfa görünümüne çok büyük katkılar sağlamaktadır.

pseudo sınıflarında sıralama önemlidir. Genel kullanımda "link - visited - hover - active"

sıralaması yapılmalıdır.

:hover : Bir elementin üzerine farenin imleci geldiğinde yapılacak tanımlama için kullanılır.

:active : Aktif olan elemente stil atamak için kullanılır.

:focus : Odaklanan elemente stil tanımlası yapmak için kullanılır.

Örnekler vericek olursak;

a:hover {
    color: #ff0000;
}

a:active {
   color: #00ff00;
}

:focus için bir örnek verecek olursak;

input:focus {
    background: silver;
    font-weight: bold;
}

Pseudo Elementleri

pseudo elementleri ile elemanları da sayfalarda bulunan elemanları seçerken daha detaylı ve değişik bir biçimde seçim yapmamızı sağlayan elemanlardır. En yaygın kullanılan pseudo elementlerinden bikaç tanesini paylaşmak gerekirse;

first-letter

first-letter ile sayfamızda bulunan bir elemanın ilk harfini seçerek, sadece ilk harfi biçimlendirmemize yarayan işimizi çok kolaylaştıran bir özelliktir.

div:first-letter {
     font-weight:bold;
}

first-letter kullanımı ile ilgili detaylı bilgi ve kullanım şeklini CSS ilk harfi büyük (drop caps) nasıl yapılır? yazımdan inceleyebilirsiniz.

first-line

first-line ile sayfamızda bulunan bir elemanın ilk satırını seçerek, sadece ilk satırı biçimlendirebilirsiniz.

p:first-line {
    color:#6D7276;
}

first-line kullanımı ile ilgili detaylı bir şekilde incelemek CSS ile bir elemanın ilk satırına (first-line) stil vermek yazımdan faydalanabilirsiniz.