Pengertian tentang menggunakan dynamic pseudo class selector di CSS, kemarin kita sudah bahasa pada artikel sebelumnnya ya teman-teman, oke saya ulang sedikit Dynamic pseudo class selector adalah selector CSS yang digunakan untuk mencari stuktur HTML berdasarkan suatu hal yang berubah karena interaksi dari user (yang mengakses website). dan disini kita akan melanjutkan tentang artikel kemarin yang baru sempat sampai di selector :link, oke bagaimana kelanjutannya simak terus ya teman-teman.

Oke langsung bagaimana menggunakan dynamic pseudo class selector di CSS, Selector :visited adalah jenis pseudo selector untuk mencari link yang telah dikunjungi. Mari langsung kita lihat contoh penggunaannya:
<!DOCTYPE html>
<html>
<
head>
<
meta charset=“UTF-8”>
<
title>Belajar CSS</title>
<
style>
:link {
color:red;
}
:visited {
color:green;
}
</
style>
</
head>
<
body>
<
a id=“daftar_kota”>Daftar Kota</a>
<
ul>
<
li><a href=“padang.html”>Kota Padang</a></li>
<
li><a href=“medan.html”>Kota Medan</a></li>
<
li><a href=“http://en.wikipedia.org/wiki/Jakarta”>Kota Jakarta</a></li>
<
li><a href=“makassar.pdf”>Kota Makassar</a></li>
</
ul>
</
body>
</
html>

menggunakan dynamic pseudo class selector di CSS

Kali ini anda dapat melihat bahwa link “Kota Jakarta” sekarang berwarna hijau. Ini terjadi karena sebelumnya saya sudah mengunjungi link tersebut. Jika saya men-klik “Kota Padang” dan kembali ke halaman ini, link “Kota Padang” juga akan berubah menjadi hijau.  Jika teman-teman melihat semua link masih berwarna merah, silahkan buka salah satu link, kemudianjalankan kembali kode diatas.

Selanjutnnya Selector :hover adalah yang paling menarik. Selector ini akan aktif ketika cursor mouse berada di atas sebuah link. Berikut contohnya:
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Belajar CSS</title>
<style>
:link {
color:red;
}
:hover {
color:aqua;
}
</style>
</head>
<body>
<a id=”daftar_kota”>Daftar Kota</a>
<ul>
<li><a href=””>Kota Padang</a></li>
<li><a href=””>Kota Medan</a></li>
<li><a href=””>Kota Jakarta</a></li>
<li><a href=””>Kota Makassar</a></li>
</ul>
</body>
</html>

 menggunakan dynamic pseudo class selector di CSS

Jika teman-teman menggerakkan cursor mouse ke salah satu link, warna teks akan berubah menjadi biru aqua. Inilah fungsi dari selector :hover. Oke masih ada lagi ya teman-teman, tapi akan kita lanjutkan pada artikel selanjutnnya saja supaya tidak terlalu kepanjangan, oke sampai disini dulu belajar kita tentang  menggunakan dynamic pseudo class selector di CSS, semoga bermanfaat.