Tutorial CSS Lengkap Pemula Part 3 || Dynamic Pseudo Class Selector

24 Jul, 2023

Assalmuaiaikum wr wb kembali lagi disini mengenai pembahasan lanjutan dari CSS Selector yaitu Dynamic Pseudo Class Selector. jenis selector ini digunakan untuk mencari struktur elemen HTML berdasarkan Interaksi yang dilakukan oleh user.

Dalam penggunaan dengan pseudo class selector adalah penulisannya diawali dengan tanda titik dua " : " seperti :hover. Berikut 5 jenis dynamic pseudo class selector dalam CSS yang sering digunakan :

:link
:visited
:hover
:active

Selector :link

Selector :link berfungsi untuk mencari seluruh link di dalam HTML.Berikut penggunaanya :

Perhatikan kode diatas, saya mempunyai 3 buah tag hyperlink untuk menuju ke halaman masing masing (halaman 1-3) pada baris kode 16-18 kemudian saya terapkan fungsi selector :link pada CSS di baris 9-11. Hasilnya pada browser hyperlinknya akan berwarna merah.

Selector :visited

Selector :visited berfungsi untuk memberikan efek ketika link tersebut telah dikunjuni, untuk lebih memahaminya perhatikan contoh kode dibawah berikut:

Perhatikan kode diatas untuk mengetahui efek dari selector ini, silahkan klik halaman 1, kemudian kembali lagi kelaman utama (index.html) akan terlihat sekarang link "halaman 1" akan tampil dengan
warna hijau. Inilah efek dari selector :visited.

Selector :hover

Selector :hover berfungsi untuk memberikan efek cursor mouse ketika diarahkan ke link , untuk lebih memahaminya perhatikan contoh kode dibawah berikut:

Selector :active

Selector ini hampir sama dengan selector hover, tetapi untuk menerapkan efek ini caranya butuh beberapa detik agar efeknya terlihat. Untuk lebih memahaminya perhatikan contoh kode dibawah berikut:

Silahkan perhatikan kode diatas, hasilnya Efek warna kuning bisa terlihat karena saya menahan tombol mouse pada saat men-klik link "Halaman 3". Mungkin sekian dari pembahasan mengenai Dynamic Pseudo Class Selector, pada pembahasan selanjutnya saya akan membahas Structural Pseudo Class Selectors yang merupakan masih lanjutan dari bab atau materi tentang CSS Selector.