Sintaks dari pseudo-class :
pemilih:pseudo-class{
properti:nilai;
}
Class CSS bisa juga dengan pseudo-class :
pemilih.class:pseudo-class{
properti:nilai;
}
Yang biasa anda lihat pseudo-class seperti ini :
a:link{
properti:nilai;
}
a:hover{
properti:nilai;
}
a:visited{
properti:nilai;
}
a:active{
properti:nilai;
}
| :link | pseudo-class untuk menambahkan gaya pada link yang belum dikunjungi. |
| :hover | pseudo-class untuk menambahkan gaya pada elemen, ketika anda mengarahkan kursor mouse di atasnya |
| :visited | pseudo-class untuk menambahkan gaya pada link yang dikunjungi |
| :active | pseudo-class untuk menambahkan gaya pada elemen yang sedang aktif |
| :focus | pseudo-class untuk menambahkan gaya pada elemen yang memiliki fokus input keyboard |
Kombinasi dengan CSS class :
Kode CSS :
a.contoh:hover{
color:green;
}
Kode HTML :
<a class="contoh" href="http://nanoyulianto.blogspot.com/">Blog Nano Yulianto</a>
Jadinya dan letakkan kursor mouse anda diatas link : Blog Nano Yulianto
:first-child
Gunakan Notepad :
<html>
<head>
<style type="text/css">
p:first-child
{
color:red;
}
</style>
</head>
<body>
<p>Saya adalah Nano Yulianto.</p>
<p>Panggil saja Nano.</p>
</body>
</html>
Save As .html, dan lihat hasilnya !. Begitulah kegunaannya...
Alhamdulillah
1 comments:
Makasih Banyak Atas Penjelasannya...
Mampir http://www.web-rpl.co.cc/...
Posting Komentar