CSS Özel İfadeler (Pseudo)

0 131

CSS Özel İfadeler; bir web sitesinde renkler ve görsellerin yeri ayrıdır ancak bir ziyaretçi olarak web sayfalarında önem verilen bir diğer husus tabi ki de harekettir. Bir web sayfasında bir butonun hareketi ya da menünün basıldığında verdiği efekti kim sevmez ki? İşte bu konu için de CSS bizlere kolaylık sağlamış ve Elementlere bazı alt özellik vermiştir.

Elementlerin Alt Özellikleri

HTML ve CSS kullanırken hareket ve de özellik değiştirme bir sitenin vazgeçilmez özeliklerindendir. Örneğin bir A elementinin fare ile üzerine gelindiğinde (hover) ya da ziyaret edildiğinde (visited) bu iki farklı durum için farklı stiller kullanabilmekteyiz. Tabi bunu CSS Özel İfadeler adı altında toplamış bulunmaktayız.

CSS Özel İfadeler Nasıl Kullanılır?

CSS Özel İfadeler elementten hemen sonra iki nokta (:) konularak Alt özellik belirlenir. Örneğin altta her biri için küçük bir örnek verelim…

a { color: #FF0000; }
a:link {color:#FF0000;}    /* ziyaret edilmemiş */
a:visited {color:#00FF00;} /* ziyaret edilmiş */
a:hover {color:#FF00FF;}   /* fare üzerinde */
a:active {color:#0000FF;}  /* seçilmişse */

Yukarıda da görüldüğü üzere yazıldığında tüm “a” etiketlerinde bu aktif olur ancak “class” üzerinden sadece istediğiniz “a” elementlerine istediğiniz stili verebilirsiniz. Aşağıda “yesil” classına sahip bir “a” elementine stil yazacağız.

a.yesil:link {color:#008000;}    /* ziyaret edilmemiş */
a.yesil:visited {color:#008000;} /* ziyaret edilmiş */
a.yesil:hover {color:#008000;}   /* fare üzerinde */
a.yesil:active {color:#008000;}  /* seçilmişse */

İlk Elemente Özel Stil Belirleme

Bazı durumlarda birden fazla kullandığımız elementler olabilmektedir. Bu tür durumlarda ilk elementin diğer elementlerden farklı gözükmesi için First-Child alt özelliğini kullanırız. Örneğe Bakalım:

<html>
 <head>
 <style type="text/css">
    p:first-child i { color:blue; }
 </style>
 </head>

 <body>
  <p>Ben <i>güçlü</i> biriyim. Ben <i>güçlü</i> biriyim.</p>
  <p>Ben <i>güçlü</i> biriyim. Ben <i>güçlü</i> biriyim.</p>
 </body>

</html>

Cevap bırakın

E-posta hesabınız yayımlanmayacak.