Belajar CSS (Selector pseudo-class)

Syntax dari pseudo-class yaitu:

selector:nama_pseudo-class {property:value;}

Contoh:

a:visited{
color:#000;
}

Atau bisa juga:

.class selector:nama_pseudo-class {
property:value;
}

Contoh:

.contoh a:hover{color:red;text-decoration:bold;}

Berikut beberapa nama-nama pseudo-class:

• :link = Memberikan style pada link yang belum dikunjungi.
• :visited = Memberikan style pada link yang telah dikunjungi.
• :hover = Memberikan style pada elemen yang disorot oleh pointer/mouse.
• :active = Memberikan style pada elemen yang berada pada keadaan diaktifkan.
• :focus = Memberikan style pada elemen ketika elemen tersebut menerima focus.
• :first-child = Memberikan style pada elemen anak pertama pada dari elemen lainnya.
• :lang = Menentukan bahasa yang digunakan pada elemen tersebut.

Dengan pseudo-class :link, :visited, :hover, dan :active, kita bisa menambahkan efek pada sebuah link. Misalkan ada sebuah kode CSS seperti berikut:

a:link{
color:orange;
}
a:visited{
color:#000;
}
a:hover{
font-weight:bold;
}
a:active{
color:blue;
}

Style diatas jika diaplikasikan pada sebuah link dengan kode HTML sebagai berikut:

<a href="http://www.google.com">Google</a>

Maka, link tersebut akan memiliki warna oranye, dan saat di-hover (disorot dengan pointer/mouse) font akan ditampilkan menjadi cetak tebal, saat di-klik sekilas akan berubah menjadi warna biru, dan setelah link tersebut dikunjungi akan berubah warnanya menjadi warna hitam.