Cara Menggunakan Pseudo-class Selectors Pada CSS
Pseudo-class selector adalah selector CSS yang cara penulisannya diikuti oleh tanda titik dua. Kalian mungkin sudah sangat familiar dengan beebrapa perintah pseudo-class seperti hover yang melekat pada selector a (a:hover).
Fungsi Pseudo-class Selector
Pseudo Class Selector digunakan untuk mengakses bagian tertentu dalam HTML yang tidak ‘terlihat’ (tidak tertulis di dalam tag HTML) atau bagian dari HTML yang tidak bisa diakses dengan selector sederhana lain. Contoh penggunaannya adalah untuk memberikan style saat pointer mouse diatas element tertentu, atau memberikan style saat sebelum atau sesudah link di klik.
Penggunaan Pseudo-class Selector
Format penulisan Pseudo-class Selector pada CSS:
1 2 3 |
selector:pseudo-class { property: value; } |
Untuk memahami lebih jelas tentang penggunaan Pseudo-class Selector, pada tutorial ini akan dibahas penggunaannya dalam contoh berikut ini:
Kode HTML + CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title>Belajar Menggunakan Pseudo-Class Selector CSS Bersama SolusiLain.Com</title> <style> a:link{ color: red; } a:hover{ color: yellow; } a:visited{ color: green; } </style> </head> <body> <h3>Contoh Link Yang Diformat Menggunakan Pseudo-class Selector CSS</h3> <a href="http://solusilain.com">SolusiLain.Com</a> </body> </html> |
Hasildari kode HTML dan CSS di atas adalah sebagai berikut:

Contoh Link Dengan Pseudo-class Selector
Secara default ketika elemen <a> memiliki atribut href yang tidak kosong maka akan diformat dengan warna merah (menggunakan a:link). Jadi :link ini untuk menemukan dan elemen <a> yang atribut href nya tidak kosong. Kemudian kalian bisa mencoba dengna mengarahkan pointer mouse ke teks SolusiLain.Com yang telrha diberikan link, maha teks akan berubah menjadi warna kuning (dikenal dengan efek hover yang diformat dengan a:hover). Setelah link kalian klik dan menuju ke halaman tujuan, maka ketika kalian melihat kembali teks SolusiLain.Com akan berubah menjadi warna hijau sesuai format a:visited.
Dalam contoh di atas saya menggunakan metode CSS Internal Style Sheets dalam mengaitkan CSS dengan HTML. Tujuan saya hanya supaya kode html dan css tampil semua dalam contoh. Kalian dapat mencoba dengan metode lainnya untuk mengaitkan CSS dengna HTML.
Baca : Cara Menerapkan CSS pada Dokumen HTML
Demikian tutorial Cara Menggunakan Pseudo-class Selectors Pada CSS. Mudah-mudahan dapat dipahami dan bermanfaat.