Kemarin kita sudah menggunakan beberapa selctor yaitu selector hover dan visited ya teman-teman tapi masih ada lagi ya teman-teman disini kita akan belajar lanjutan menggunakan dynamic pseudo class selector di CSS, oke bagaimana carannya simak terus ya.

Dalam lanjutan menggunakan dynamic pseudo class selector di CSS, ketika kita menggunakan hover bisa teman-teman perhatikan bahwa saya menulis selector ini dengan a:hover. Tanda “a” di awal selector adalah implementasi dari element spesific selector yang telah kita pelajari sebelumnya. Dengan menambahkan selector “a”, maka efek ‘hover’ hanya akan aktif untuk tag “a” saja.

Selector :active akan aktif hanya sepersekian detik, yakni ketika kita men-klik tombol mouse saat mengunjungi sebuah link. Agar bisa melihat efeknya, tahan tombol mouse saat men-klik sebuah link. Berikut contohnya:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Belajar CSS</title>
<style>
:link {
color:red;
}
:visited {
color:green;
}
a:hover {
color:aqua;
}
a:active {
color:yellow;
}
</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>

lanjutan menggunakan dynamic pseudo class selector di CSS

Efek warna kuning diatas hanya bisa dilihat karena saya menahan tombol mouse pada saat akan men-klik link “Kota medan”, jika tidak, efek yang terjadi terlalu cepat untuk bisa dilihat (sepersekian detik ketika link di-klik).  Hal lain yang perlu diingat terkait penggunaan pseudo class untuk link adalah: posisi penulisan selector mempengaruhi efek yang ditampilkan. Ini terjadi karena setiap selector memiliki prioritas yang berbeda-beda. Dalam contoh diatas saya membuat urutan penulisan mulai dari :link, :visited, :hover, dan :active. Bagaimana jika urutannya dibalik?

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Belajar CSS</title>
<style>
a:active {
color:yellow;
}
a:hover {
color:aqua;
}
a:visited {
color:green;
}
a:link {
color:red;
}
</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>

lanjutan menggunakan dynamic pseudo class selector di CSS

Jika teman-teman menjalankan kode diatas, style untuk :hover dan :active tidak akan berjalan. Ini terjadi karena efek style dari :link dan :visited menimpa’ efek style :hover dan :active. Oleh karena itu urutan penulisan pseudo class link haruslah mulai dari :link, :visited, :hover, dan :active. Web designer memiliki trik tersendiri untuk mengafal urutan ini : “Love Hate”, dimana awalan setiap selector tersusun dari huruf “l, v, h, dan a”. Oke sampai disini dulu belajar kita tentang lanjutan menggunakan dynamic pseudo class selector di CSS, semoga bermanfaat dan sampai jumpa pada artikel selanjutnnya terimakasih.