Efek yang ingin kami capai adalah menambahkan ikon kecil ke semua tautan yang menunjuk ke situs ini untuk memberi tahu pengguna bahwa mengklik tautan ini akan menyebabkan Anda meninggalkan situs ini, yang merupakan tautan eksternal. Tentu saja ini dapat dicapai melalui JavaScript yang lebih kompleks, tetapi kami sekarang dapat menerapkan fungsi ini melalui pemilih properti CSS 3.
a [href^= "http:"] {
Latar Belakang: URL (Gambar/ExternAllink.gif) TOP TOP NO-REPEAT;
Padding-Right: 10px;
}
Kode di atas berarti: Semua tautan yang dimulai dengan HTTP: akan memiliki ikon panah kecil, mendorong pengguna untuk menjadi tautan eksternal, dan pengguna akan meninggalkan situs ini dengan mengklik. Dapat dikatakan bahwa fungsi ini sangat ramah pengguna dan menyoroti kemudahan penggunaan desain web.
Tentu saja, ini untuk tautan ke situs ini yang menggunakan alamat relatif. Bagaimana jika tautan ke situs ini juga dimulai dengan http:, atau jika menggunakan alamat absolut dan relatif? Kita dapat menggunakan kode berikut:
a [href^= "http:"] {
Latar Belakang: URL (Gambar/ExternAllink.gif) TOP TOP NO-REPEAT;
Padding-Right: 10px;
}
A [href*= ”www.dudo.org”] {
Latar Belakang: Tidak Ada;
Padding: 0;
}
Dua aturan di atas adalah: semua ikon yang dimulai dengan http: ditambahkan dengan tautan eksternal, diikuti oleh http://www.dudo.org/, dan mereka tidak digunakan, jadi mereka secara alami relatif terhadap alamat karena tidak ada Mulailah dengan HTTP.
Sumber: http://www.dudo.org/article/cssjs/use_new_tech_of_css.htm