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

http://kaioa.com/node/93 [http://reference.sitepoint.com/css/pseudoclass-target]: http://reference.sitepoint.com/css/pseudoclass-target

Çalışma Ortamı Yenilikleri

Çalışma Ortamı Yenilikleri Devamını oku

VS Code ipuçları

11 October 2021 tarihinde yayınlandı.

VS Code ile yazım denetimi

12 July 2021 tarihinde yayınlandı.