Pseudo sınıf ve elementleri, diğer CSS Seçicilerinden farklı olarak, XHTML elementlerin seçilmesi işlemini, elementlerin özel durumlarına göre yapmamıza imkân tanır. Böylece XHTML doküman yapısı içerisinden erişemediğimiz elementlere özel olarak erişmiş oluruz.  Yani, pseudo sınıf ve elementlerini kullanarak bir linki, tıklanmış olma ya da olmama durumuna göre farklı olarak şekillendirebiliriz, ya da bir paragrafın ilk satırını ya da ilk harfini dinamik olarak seçebiliriz. CSS pseudo sınıfları ve elementleri CSS3 ile daha da zenginleşiyor. Buradan yeni pseudo sınıflarını görebilirsiniz.

Bu yazımda bütün pseudo sınıf ve elementlerini tanıtma imkânım olmayacak. Yeri geldikçe diğer yazılarda örnekler üzerinden anlatmayı planlıyorum. O açından bu yazıda genel ve en bilindik olanları üzerinde duracağım. Başlıyoruz…

:link, :visited, :hover, :active ve :focus

Pseudo sınıfları en bilindik olarak, bir web uygulamasındaki linklerin şekillendirilmesi için kullanılırlar. Linklerin şekillendirilmesi, aşağıdaki şekilde gerçekleştirilir. Her bir pseudo sınıfı, her bir linkin farklı bir durumunu işaret ediyor. Bu pseudo sınıflarının uygulanma sırası aşağıdaki şekilde olmalıdır.

a:link    /* Ziyaret edilmemiş linkler */
a:visited /* Ziyaret edilmiş linkler */
a:focus   /* Link seçildiğinde */
a:hover   /* Linklerin üzerine gelindiğinde */
a:active  /* Link tıklandığında */

Örnekleyelim;

<p>Lorem <a href="#1">ipsum</a> dolor sit amet, <a href="#2">consectetur</a> adipiscing elit.
<a href="#3">In a sem at</a> dolor <a href="#4">vehicula</a> vehicula.</p>

a:link    {color:red; text-decoration:none;}
a:visited {color:#ccc; text-decoration:line-through;}
a:focus   {background-color:red; color:white;}
a:hover   {color:blue; text-decoration:underline;}
a:active  {background-color:green; color:white;}

Yukarıdaki örnekte bir linkin 5 farklı durumu için tanımlamada bulunmuş olduk. Örneği çalıştırdığım tarayıcılarda IE8, Firefox3 ve Chrome’da en doğru sonuca ulaştım… IE8 öncesinde :focus durumu için :active durumunu uyguluyor. Örneğe buradan ulaşabilirsiniz.

Not: Linkleri :focus durumuna getirmek için klavye Tab tuşunu kullanarak pencere içinde seçim yapın…

Pseudo sınıfları beraber, zincirleme olarak kullanılabiliyorlar. Mesela ziyaret edilmiş linklerin üzerine gelindiği durum aşağıdaki şekilde ifade edilebilir.

a:visited:hover {color:blue;}

Bir not olarak, dinamik pseudo sınıfları olarak tanımladığımız :hover, :focus ve :active sınıfları, link dışındaki XHTML elementlerinde de kullanabilir.

:hover, :focus ve :active Alternatif Kullanımı

Aşağıdaki örnekte, iki pseudo sınıfının link dışında alternatif kullanımını örneklemeye çalıştım.

<img src="resim.jpg" alt="bir resim" />
<textarea rows="8" />

img {border:3px solid #eaeaea;}
img:hover {border-color:#666;}

textarea:focus {background-color:#eaeaea;}

Örneğe buradan ulaşabilirsiniz…

Yukarıda gördüğünüz gibi <textarea> elementini, mouse ile işaretlediğimde (focus) nasıl görüneceğini yukarıdaki gibi belirtebiliyoruz. Aynı şekilde :hover sınıfının link dışında, bir imaj üzerinde de kullanılabildiğini görüyorsunuz. Ne yazık ki, bu kullanım şekilleri her zaman olduğu gibi IE6 tarafından desteklenmiyor.

:first-child

Hatırlarsanız size şu yazımda Ailesel CSS Seçicilerden bahsetmiştim. Ailesel CSS Seçiciler kullanarak etiketleri, DOM yapısı içerisindeki akrabalık ilişkilerine göre seçebiliyorduk. :first-child pseudo sınıfıyla, Ailesel CSS Seçicilerden farklı olarak, ilk çocuk etiketi olma durumuna göre seçme imkânına sahibiz. Hemen örnekleyelim.

<div id="detay">
    <p>İlk Paragraf</p>
    <p>İkinci Paragraf</p>
</div>

div#detay > p:first-child {
	font-weight:bold;
	color:red;
}

Yukarıda gördüğünüz üzere #detay ID’li <div> içindeki, ilk çocuk paragrafı seçebiliyoruz. Örneği görmek için tıklayınız…

:first-letter

Herhangi bir yazınsal içeriğin ilk harfini seçmek istersek :first-letter pseudo elementi kullanıyoruz. Aşağıdaki örnekte gördüğünüz gibi, bir satır içi alıntının ilk harfini seçmiş olduk.

<p>Paragrafın ilk Harfi P</p>

p:first-letter {
	font-size:3em;
}

:first-line

Eğer istediğimiz herhangi bir paragrafın ilk satırını seçmek ise, :first-line pseudo elementini kullanabiliriz. Seçilecek içerik o etiketin tarayıcı içerisinde ne kadar genişlikte olduğuna bağlı olarak dinamik değişecektir.

p:first-line {text-transform:uppercase;}

Yukarıdaki örneği buradan test edebilir ve eğer tarayıcı pencere boyutunuzu küçültürseniz, dinamik olarak her paragrafın ilk satırının nasıl seçildiğini göreceksiniz.

:lang

Eğer bir etiketin lang özelliğine göre seçim yapmak istersek, :lang pseudo sınıfını kullanabiliriz. Böylece farklı dillerdeki içeriği, farklı olarak şekillendirebiliriz. Örneğimiz aşağıda…

<p lang="fr">Bonjour tout le monde</p>
<p lang="en">Hello World</p>

p:lang(en) {
	padding:0 0 0 20px;
	background:url(engflag.gif) no-repeat;
}
:lang(fr) {
	padding:0 0 0 20px;
	background:url(frflag.gif) no-repeat;
}

Yukarıdaki örnekte gördüğünüz gibi etiketleri farklı dil özelliklerine göre seçip, şekillendirebiliyoruz. Umarım faydalı olmıuştur, herkese kolay gelsin.

Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.