CSS Özel İfadeler (Pseudo)
Elementlerin Alt Özellikleri
HTML'de A kodu belli durumlarda belli stiller alabilir. Örneğin fare ile üzerine gelindiğinde (hover) veya ziyaret edildiğinde (visited) farklı farklı stiller kullanmak gerekebilir. İşte bu tarz kullanımlar CSS nin özel kullanımlarıdır.
Pseudo Class olarak ifade edilen bu kullanımda seçimden hemen sonra iki nokta (:) kullanılır ve alt özellik belirtilir. Örneğin aşağıdaki kod tüm linklerin tüm alt özellikleri için geçerli olacaktır:
Ancak aktifken, üzerine gelindiğinde ya da ziyaret edilmişse nasıl görüneceğini ayrı ayrı şu şekilde belirtebiliriz:
CSS Kodu
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 */
Eğer kendi belirlediğimiz bir stilde bu alt özellikleri biçimlendireceksek elementten sonra stil adını nokta ile ayırarak yazmalıyız:
CSS Kodu
a.kirmizi:visited {color:#FF0000;}
İlk Elemente Özel Stil Belirleme
Aynı elementten birden çok kullandığımız bir yerde sadece ilk elementin diğer elementlerden farklı görünmesi için
first-child alt özelliğini kullanırız. Örneğe bakalım:
HTML Kodu
<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>
Yukarıdaki kodu bir not defterine yapıştırıp sonunu .html olarak kaydedin ve açın. Göreceksiniz ilk "güçlü" yazısı mavi renkle yazılmış. Bunu diğer tüm elementlerde de kullanmanız mümkündür.