Bazen sitemizdeki bağlantılara daha fazla görsellik katmak isteye biliriz. Css ile halledebileceğimiz senaryo da bağlantının uzantısına göre renklendirip sağına resim ikon ekleye bilmekteyiz. İsteyen alttaki kodlarla sitesindeki tüm linkleri tek tek stil ekleyebilir.
Suffix selectors anlamında kullanılan uzantı seçici senaryosunu tam açıklamak gerekirse; sitenizde .psp, .exe, .rar vb. gibi dosya paylaşım linkleri olduğunu düşünün. Bu linkleri ziyaretçiye daha hoş göstermek için eklediğimiz link uzantısına göre linki renklendirip minik ikon resmi ekleyebiliriz.
Kodu kopyala yapıştır yaparsanız tam olarak çalışmayacaktır. background:url(winraricon.png) css dosyasının aynı dizininde olduğu için resimdeki gibi sorunsuzca çalıştı.
[cc lang=”c#”]
a[href$=”.rar”]{
background:url(winraricon.png) no-repeat right center;
color:#C00;
padding-right:20px;
}
[/cc]
Burada dikkat ederseniz olay [href$=”.rar”] kodunda cereyan etmekte. Burada .rar uzantısı yerine veya ayrı bir link için css tanımladığınızda istediğiniz uzantıyı yazarak özel uzantı seçici oluşturabilirsiniz. Diğer dikkat edilmesi gereken nokta, seçtiğiniz resim boyutuna göre padding-right değerini ayarlamak oluyor.