: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
Google Chrome
1.0+
Microsoft Edge
Microsoft Edge
Evet
Mozilla Firefox
Mozilla Firefox
1.0+
Internet Explorer
Internet Explorer
4.0+
Opera
Opera
5.0+
safari
Safari
1.0+
Mobil Tarayıcılar
Android Webview
Android Webview
1+
Samsung İnternet
Samsung İnternet
-
Google Chrome
Google Chrome
-
Microsoft Edge
Microsoft Edge
Evet
Mozilla Firefox
Mozilla Firefox
4+
Opera
Opera
6+
safari
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.

8
Bir yorum yap yada bir soru sor.

avatar
7 Yorum konuları
1 Konu cevapları
0 Takipçiler
 
En çok beğenilen yorum dizilişi
En iyi yorum dizilişi
8 Yorum yazarları
EnesabdullahRenkli Blog Sayfamishanaİsmail Son yorum yazarları
  Yorumlara Abone Ol  
Önce Yeniler Önce Eskiler Önce Beğenilenler
Bildir
Serkan Karamsar
Serkan Karamsar

Ellerine sağlık çok yararlı bilgiler.

Eren
Eren

:active seçicisini farklı yollarla kullanıyordum, bu yazıdan sonra kendim yapabilirim! kodlama konusundaki bu katkılarınız gerçekten çok yararlı oluyor. Sitenizin devamlı takipçisiyim! Umarım yazılarınıza hep böyle devam edersiniz, benim gibi kodlamaya yeni başlayanlara çok yardımcı oluyorsunuz.

İsmail
İsmail

CSS kodları gerçekten yazarken çok karmaşık gleiyor ama Murat Hocam gibi üstatlar sağolsun bu işleri bizler için kolaylaştırıyor. active seçicisi konusunu örneklerle çok iyi bir şekilde anlatmışsınız hocam hem yeni başlayan emde orta düzey tüm CSS coderlarının işine yarayacak kodlar.

ishana
ishana

CSS HTML’in kuaför salonu. HTML ile her ne kadar bir WEB sayfası yapabilseniz de, CSS ise zenci bir WEB sayfasını Çinli olarak pazarlayabilirsiniz. Bu arada CSS ile güzelleştirdiğiniz sayfanızı Javascript ile işlevsel hale getirebilir, PHP ile sunucu taraflı yapabilirsiniz. Keşke ilkokuldan itibaren günde en az 4 saat web tasarım ve kodlama dersi olsa. Bütün okullarda zorunlu ve başarılması şart olsa. Ülkemizin en azından önümüzdeki 5 yıl içerisinde Bilişim teknolojilerinde büyük bir atılım yapması gerekiyor. Tarım ve tekstil ülkesi olmayı tercih etmedik bari teknoloji ülkesi olalım.

Renkli Blog Sayfam
Renkli Blog Sayfam

Codex olarak yine çok yararlı bir konuya değinmişsiniz active seçicisinin nasıl kullanılacağı hakkında daha ayrıntılı fikrim oldu

abdullah
abdullah

Css active seçicisini nasıl yapacağımı araştırıyordum ben de, amatör olarak kodlarla uğraşmak hoşuma gidiyor. Gayet yalın bir dille anlatmışsınız… Eğer yardıma ihtiyacım olursa buradan yazarım size tekrardan, yardımcı olursanız sevinirim.

Enes
Enes

Bu konular hakkında gerçekten hiç bilgim yok. Tamamen farklı bir dil gibi geliyor bana, ama yazılarınız okudukça öğrenmeye çalışıyorum. Css :active hakkında güzel bilgi paylaştınız..