Skip to main content

B.6.4. Visited

Pada chapter ini, kita akan membahas salah satu pseudo-class yang cukup penting yaitu :visited. Pseudo-class :visited biasanya diterapkan pada tautan (<a>) yang telah dikunjungi oleh pengguna. Ini memungkinkan kita untuk memberikan style berbeda pada tautan yang sudah diklik oleh pengguna.

Contohnya, kita akan punya <ul> dengan dua <li> di dalamnya. Masing-masing <li> akan berisi elemen <a> yang ketika diklik akan mengarahkan pengguna ke social media kita. Let's code! 

<ul class="social-links">
  <li>
    <a target="_blank" href="https://github.com/mframadann">Go to GitHub</a>
  </li>
  <li>
    <a target="_blank" href="https://instagram.com/mframadann"
      >Go to Instagram</a
    >
  </li>
</ul>

Silahkan teman-teman bisa tulis ulang kode di atas lalu teman-teman buka di web browser masing-masing ya. Teman-teman bisa ganti isi href nya dengan sosial media kalian atau ga di ganti juga gapapa:D

Attribut target="_blank" berfungsi agar ketika link diklik maka akan di buka pada tab baru. Hasil dari kode di atas bisa teman-teman lihat pada video di bawah ini.

Bisa teman-teman lihat ketika link Go to GitHub diklik maka akandi arahkan ke akun github milik saya, dan ketika kita kembali lagi maka link Go to GitHub akan berubah warnanya menjadi blueviolet.

:visited berguna banget kalau di website teman-teman terdapat beberapa link yang harus dikunjungi satu per-satu, jadi nanti pengguna tidak akan bingung lagi tentang link mana yang sudah dia kunjungi sebelumnya.

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.6-pseude-class/B.6.4-visited