Dasar CSS - Pseudo Class
Menurut W3School Pseudo Class digunakan untuk mendefinisikan kondisi khusus dari sebuah elemen. sebagai contoh pseudo class dapat digunakan sebagai :
Pseudo Class Terbagi menjadi :
- style sebuah elem ketika user menggerakan mouse kearahnya (misalkan ketika mouse diarahkan maka hurufnya menjadi besar
- style untuk membedakan sebuah link yang sudah dikunjungi atau belum dikunjungi
Pseudo Class Terbagi menjadi :
- link :Style default sebuah link
- Hover : Style Ketika Mouse diarahkan
- active : Style Akitf Sebuah Link yang dipilih
- visited : Style Link yang sudah dikunjungi
<!DOCTYPE html>
<html lang="en">
<head>
<style>/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}</style>
</head>
<body>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</body>
</html>
Gambar 1 contoh Link yang belum dikunjungi warna merah
Pada saat link belum dikunjungi maka warna link merah (unvisited link berwarna merah)
Gambar 2. Ketika link sudah pernah dikunjingu warnanya hijau
Pada saat link sudah pernah dikunjungi maka warna link hijau (visited link berwarna hijau). untuk lebih jelas perhatikan gif berikut ini.
Comments
Post a Comment