CSS Pseudo-Sınıfları


Pseudo sınıf ve
elementleri CSS’i destekleyen web tarayıcıları tarafından otomatik
olarak tanınan özel sınıf ve elementlerdir. Bu sınıf ve elementler
(x)html hiyerarşisi ile erişemediğimiz element ve sınıflara
erişmemizi sağlar. Pseudo sınıfı bir elementi
farklı sınıflara böler(örn: link elementini active, visited vd.
sınıflarına böler) Pseudo elementi ise bir elementi
alt kısımlara böler (örneğin bir paragrafın ilk harfi, bir
paragrafın ilk satırı gibi.)



Pseudo sınıfına örnek:





  1. a:visited {color: red;}




Pseudo elementine örnek:





  1. p:first-line { font-weight: bold; }




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





  1. a.disariyalinkller:link, a.disariyalinkller:visited {color: maroon;}




Aynı şekilde id
seçicileri ile birlikte de kullanılabilirler





  1. a#altkisim:link{font-weight: bold;}




Pseudo sınıflarını da
ikiye ayıra biliriz. Link Pseduo Sınıfıları ve
Dinamik Pseudo Sınıfları



Link Pseudo sınıfı


Yanlızca linklere
uygulanan iki Link Pseduo sınıfı vardır. :link ve
:visited



:link -
Ziyaret edilmemiş sayfanın linkine stil tanımlaması yapmak için
kullanılır. Ancak bir çok web tarayıcısı yapılan stil tanımlarını
ziyaret edilmiş sayfa linklerine de uygular.



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





  1. a:link {color: blue;}





  2. a:visited {color: red;}




Bunun yerine genelde
aşağıdaki gibi bir kod da kullanılır




  1. a
    {color: blue;}





  2. a:visited {color: red;}




Bu kodlama ile
kullanıcaya ziyaret ettiği sayfa linkleri farklı renkte gösterilerek
içeriksel bir bilgi görsel olarak verilebilir.






Browser Uyumu:



Internet Explorer 5.0,
5.5, 6.0, 7.0: destekliyor ;

Netscape Navigator 6.0, 7.0: destekliyor ;

Mozilla 1.0: kısmen ;

Opera 5.0 ‘ 6.0: destekliyor



Dinamik Pseudo Sınıfları


Dinamik Pseudo
Sınıfları
sayfa görünümüne çok büyük katkılar yapabilir. Bu
sınıflar genelde linklere uygulanır ancak bir çok kullanım alanları
vardır. tanedir :focus, :active ve
:hover





Not



Pseudo sınıflarında
sıralama önemlidir. Genel kullanımda “link-visited-hover-active,”
sıralaması yapılmalıdır. Tüm sınıflar içinse
“link-visited-

focus-hover-active.”
sıralaması yapılmalıdır.



:focus -
Odaklanan elemente stil tanımlası yapmak için kullanılır Örn: input
alanına içerik girerken



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



:hover -
Bir elementin üzerine Farenin imleci geldiğinde yapılacak tanımlama
için Örn: bir linkin üzerine fare ile geldiğimizde renk
değiştirmesini sağlamak için



Linkler için genel
kullanım





  1. a:link {color: navy;}





  2. a:visited {color: gray;}





  3. a:hover {color: red;}





  4. a:active {color: yellow;}




:focus
için bir örnek verecek olursak





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





Browser Uyumu:



Internet Explorer 5.0,
5.5, 6.0, 7.0: destekliyor ;

Netscape Navigator 6.0, 7.0: destekliyor ;

Mozilla 1.0: destekliyor ;

Opera 5.0 ‘ 6.0: destekliyor



İlk Çocuk Elementi seçmek


Diğer bir pseudo
sınıfımız :first-child‘dır.



first:child:
Belirtilen elementin ilk Çocuk Elementine stil atamak için
kullanılır.





  1. p:first-child {font-weight: bold;}





  2. li:first-child {color:#f00;}









  3. <div>





  4. <p>Bu paragraf ilk
    çocuk elementtir ve sonuç olarak kalın olacaktır</p>




  5. <ul> <li>Bu
    liste ilk çocuk elementtir ve font rengi kırmızı olacak</li> <li>Bu
    <strong>çocuk element </strong>değil</li> <li>Bu da değil</li> </ul>




  6. <p>Bu pragraf
    <em>bir</em> çocuk element değil.</p>





  7. </div>





Browser Uyumu:



Internet Explorer 5.0,
5.5, 6.0 desteklemiyor 7.0: destekliyor ;

Netscape Navigator 6.0, 7.0: destekliyor ;

Mozilla 1.0: destekliyor ;

Opera 5.0 ‘ 6.0: desteklemiyor



:lang Pseudo Sınıfı


Lang pseudo sınıfı
içerikteki bir elemente farklı bir dil de yazmamızı sağlar.








  1. <html><head> <title>lang
    test</title>





  2. <style type="text/css">





  3. p:lang(fr) {color: red;}





  4. </style>





  5. </head><body>





  6. <p lang="fr">





  7. Bonjour le monde!





  8. </p>





  9. </body></html>





Browser Uyumu:



Internet Explorer 5.0,
5.5, 6.0, 7.0 desteklemiyor

Mozilla 1.0: destekliyor ;

Opera 7.5 ‘ 8.5 - 9.0: destekliyor



Pseudo Sınıflarını
birleştirmek


CSS2.1 ile birlikte aynı
seçiciye ait pseudo elemntlerini birleştirme özelliği de gelmiştir.
Örneğin ziyaret edilmiş linklerin hover özelliği ile ziyaret
edilmemiş linklerin hover özelliğini farklı atamak istesek





  1. a:link:hover {color: red;}





  2. a:visited:hover {color: pink;}




Sıralama önemli değildir.




Browser Uyumu:



Internet Explorer 5.0,
5.5, 6.0, 7.0 desteklemiyor

Mozilla 1.0: destekliyor ;

Opera 9.0: desteklemiyor



Pseudo Element Seçicileri


Bu elementler hayali
elementlerdir. (X)HTML hiyerarşisi içinde bu elemntlere yoktur.
CSS2.1 de Dört adet Pseudo Element Seçicisi vardır: first-letter,
first-line, before ve
after



first-letter (ilk harf)


Bir blok-level elementin
ilk harfine stil tanımlması yapmak için kullanılır. Örnek verecek
olursak h1 elementinin baş harfinin büyük olması için :





  1. h1:first-letter {font-size: 200%;}








  2. <h1>Bu
    büyük bir başlık</h1>




Browser Uyumu:



Internet Explorer 5.0,
5.5, 6.0 desteklemiyor 7.0: destekliyor ;

Netscape Navigator 6.0, 7.0: destekliyor ;

Mozilla 1.0: destekliyor ;

Opera 5.0 ‘ 6.0: destekliyor



first-line (ilk satır)


Bir metnin ilk elementine
stil atamak için kullanılır. Örneğin paragraflarınızın ilk
satırlarını renklendirmek isitiyorsunuz.





  1. p:first-line {color: red;}





Browser Uyumu:



Internet Explorer 5.0,
5.5, 6.0,7.0 destekliyor ;

Netscape Navigator 6.0, 7.0: destekliyor ;

Mozilla 1.0: destekliyor ;

Opera 5.0 ‘ 6.0: destekliyor



before ve after
elementleri


Bir elementin öncesine ve
sonrasına bir içerik veya özellik eklemek için kullanılır.



Notlarımızın başına
otomatik oalrak Not yazmak için





  1. P.not:before { content: “Not.” }




kodu yeterlidir. Aynı
şekilde paragraflarımzın sonuna otomatik bitti yazıp nokta koymak
istersek





  1. body:after {content: ” Bitti.”;}




yeterlidir.




Browser Uyumu:



Internet Explorer 5.0,
5.5, 6.0,7.0 desteklemiyor

Netscape Navigator 6.0, 7.0: destekliyor ;

Mozilla 1.0: destekliyor ;

Opera 7.5 ‘ 8.5: destekliyor




Hanci.org sizlere daha iyi hizmet sunmak için çerezleri kullanıyor.
Hanci.org sitesini kullanarak çerez politikamızı kabul etmiş olacaksınız.
Detaylı bilgi almak için Gizlilik ve Çerez Politikası metnimizi inceleyebilirsiniz.