Efek yang ingin kami capai adalah menambahkan ikon kecil ke semua tautan yang mengarah ke non-situs ini untuk memberi tahu pengguna bahwa mengeklik tautan ini akan membawa Anda keluar dari situs ini. Tentu saja, hal ini dapat dicapai melalui JavaScript yang lebih kompleks, namun sekarang kita dapat mencapai fungsi ini melalui pemilih atribut CSS 3.
a[href^=”http:”] {
background:url(images/externalLink.gif) tidak ada pengulangan di kanan atas;
padding-kanan:10px;
}
Arti dari kode di atas adalah: Semua link yang diawali dengan http: akan ditambahkan ikon panah kecil untuk mengingatkan pengguna bahwa ini adalah link eksternal, dan pengguna akan meninggalkan situs ketika diklik. Dapat dikatakan bahwa fungsi ini sangat ramah pengguna dan menonjolkan kemudahan penggunaan desain web.
Tentu saja ini karena semua tautan yang mengarah ke situs ini menggunakan alamat relatif. Bagaimana jika tautan ke situs ini juga dimulai dengan http:, atau menggunakan alamat absolut dan relatif? Kita dapat menggunakan kode berikut:
a[href^=”http:”] {
background:url(images/externalLink.gif) tidak ada pengulangan di kanan atas;
padding-kanan:10px;
}
a [href*=”www.dudo.org”] {
latar belakang: tidak ada;
bantalan:0;
}
Dua aturan di atas adalah: semua yang dimulai dengan http: ditambahkan dengan ikon tautan eksternal, dan yang dimulai dengan http://www.dudo.org/ tidak digunakan. Alamat relatif alami tidak dimulai dengan http ikon panah tidak akan muncul.
Sumber artikel: http://www.dudo.org/article/CSSJS/use_new_tech_of_CSS.htm