CSS3 :target seçicisi

3 Mayıs 2011

:target seçicisi CSS3 ile birlikte gelen yeni seçilerden biri. :target seçicisi doküman içi linklere odaklanmamızı sağlıyor. Daha önce bu işi yapmak için javascript ile yapıyorduk. CSS3’ün bizlere kazandırdığı birçok yenilikte olduğu gibi bu özellikte basit bir şekilde sayfalarımıza güzel etkiler kazandırır. :target sözde sınıfı :hover seçicisi gibi dinamik bir seçicidir.

h3:target {
	background-color: #ff0
}

Tarayıcı Desteği

Chrome explorer Firefox
2.0+ 9+ 1.0+

Mobil Tarayıcılar

Android Mobil Safari Chrome
2.1+ 3.2+ 36+

Sayfa içi bağlantıları nasıl yaptığımı hatırlayalım.

Benzer yapının yatay kaydırma çubuğu ile olanını yapabiliriz

Sayfa içi linklerden farklı olarak name ile değil id ile tanımlanan alanları hedef seçiyoruz. Buda bizi fazla kod yazmaktan kurtarıyor.

Aşağıda bu özellik kullanılarak yapılmış bir iki güzel örneğe link verdim.

Örnek1: Dipnot

Bu özellik wikipedia tarafında dipnoların takibi için çok güzel bir şekilde kullanılmaktadır.http://tr.wikipedia.org/wiki/Trabzon_%28il%29 mesela Trabzon ili hakkında bilgiyi okurken herhangi bir dipnot linkine tıkladığımızda ilgili dipnot ardalan rengi değiştirilerek belirginleştirilmiştir.

ol.references > li:target {
	background-color:#def;
}

Bunun dışında eğlenceli örnekler geliştirilmiştir.

Örnek 2: Basit Akordiyon

http://kaioa.com/b/0903/target_faq_demo.html

#faq > li:target > div{
	display:block;
}

örnekte gizle-göster ile basit bir akordeon içerik yapısı oluşturulabilir.

Örnek3: Galeri

http://kaioa.com/b/0903/target_gallery_demo.html#i1

dt:target+dd{
    display:block;
}
    dt:target img{
    cursor:default;
    border-bottom:5px solid #000;
    border-top:5px solid #000;
    margin-top:401px;
}

Örneğinde ise basit bir galeri yapısı kurulabilir.

Zamanla çok daha güzel örneklerin çıkacağını düşünüyorum.

Kaynaklar

CSS ile büyük kardeşe söz geçirme

Başlığa bakınca sanki bir aile olayına dair bir yazı geçecek anlamı çıkarmayın. HTML'deki elemanların birbiriyle olan ilişkilerini anlatm...… Devamını oku

Javascript ile medya kontrolü

17 February 2017 tarihinde yayınlandı.

Yenilenen Google Çeviri hizmeti

31 January 2017 tarihinde yayınlandı.