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:


Kod:
a { color: #FF0000; }
Ancak aktifken, üzerine gelindiğinde ya da ziyaret edilmişse nasıl görüneceğini ayrı ayrı şu şekilde belirtebiliriz:


Kod:
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:


Kod:
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:


Kod:
<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.