:active Nasıl Kullanılır?

Bu konumuzda CSS’de bulunan bir çok seçici arasında belkide en çok kullanılan seçicilerden biri olan :active seçicisinin ne işe yaradığını ve kullanım çeşitlerini anlatıyor olacağız.

Her ne kadar :hover seçicisi kadar kullanılmasa da :active seçicisinin de CSS’de oldukça önemli bir görevi var. Mouse ile bir alanın üzerine geldiğimizde alanın veya işaret ettiğimiz farklı bir alanın stilini değiştirmek için nasıl :hover seçicisini kullanıyorsak, :active seçicisi ile de bu stil değişimini tıklandığında aktif olacak hale getirebiliriz. Yani bir div, id veya benzeri bir alanı :active seçicisi ile seçtiğimizde CSS’de tanımladığımız stil komutları seçili alana tıklandığında aktif olacak ve tıklamayı bırakana kadarda aktif kalmaya devam edecektir. Sadece tıklandığı sürece aktif olan bu seçici genellikle bağlantılarda kullanılıyor. Hani şu bağlantıya tıklandığımızda yanar da söner ya, işte o genellikle CSS ile yapılır ve :active seçicisi kullanılır.

CSS :active seçicisini Örnekler ile anlatacak olursak;

Örnek olarak iki bağlantı oluşturup bu bağlantılardan birine :active seçicisi ile CSS komutu tanımlarsak, tanımlanan bağlantıya tıkladığımızda bağlantı reaksiyon göstererek tıklandığını belli eder;

<a class="hedef-1" href="#">Dünya'ya gider</a>
<a class="hedef-2" href="#">Venüs'e gider</a>

.hedef-2:active {
	background-color: #000000;
	color: #FF0000;
}

Yukarıdaki örnekte hedef-2 içeriğindeki “Venüs’e gider” bağlantısına tıklandığında bağlantının rengi kırmızı olurken arkaplan rengi ise siyah olacaktır. Ayrıca aşağıdaki HTML kullanımı ile de aynı CSS kodları “Venüs’e gider” bağlantısının arkaplanını siyah yapıp bağlantıyı kırmızı yapacaktır.

<div class="hedef-1">
	<a href="#">Dünya'ya gider</a>
</div>
<div class="hedef-1">
	<a class="hedef-2" href="#">Venüs'e gider</a>
</div>

Bağlantılar için kullanılabildiği gibi :active seçicisi aynı zamanda herhangi bir alan için kullanmakta aşağıdaki örnekte gördüğünüz gibi mümkündür:

<div class="alan-1">Burada her şey olabilir!</div>
<div class="alan-2">Burada her şeyden fazlası olabilir!</div>

.alan-1:active {
	background-color: #000000;
	color: #FFFFFF;
}

Bu şekilde kullanıldığında alan-1‘e tıklandığında arkaplan rengi siyah olurken aynı zamanda yazı rengi beyaz olacaktır.

:active seçicisini destekleyen tarayıcı sürümleri;

Masaüstü Tarayıcılar
Google Chrome 1.0+	Microsoft Edge Evet	Mozilla Firefox 1.0+	Internet Explorer 4.0+	Opera 5.0+	Safari 1.0+

Mobil Tarayıcılar
Android Webview 1+	Samsung İnternet -	Google Chrome -	Microsoft Edge Evet	Mozilla Firefox 4+	Opera 6+	Safari 1+

Diğer seçiciler ile ilgili bilgi sahibi olmak isterseniz alttaki bağlantıdan tüm CSS seçicilerinin olduğu listeye ulaşabilirsiniz.

A’dan Z’ye Tüm CSS Seçicileri