Pseudo-class dalam kode CSS

• In ,   



Pseudo-class dalam kode CSS

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...