Belajar CSS (Selector pseudo-class)

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.
Selanjutnya
« Sebelumnya
Sebelumnya
Selanjutnya »