Pseudo Class digunakan untuk memberikan efek-efek tertentu pada selector. Misalnya efek ketika cursor berada di atas suatu elemen (hover), ketika cursor meng-klik suatu elemen dan lain sebagainya.
Berikut adalah cara penulisan pseudo class :
selector:pseudo-class { property:value; }
Misalnya kita akan menambahkan pseudo-class :hover pada sebuah link
a:hover { color : red; }
Style tersebut akan memberikan efek perubahan warna link menjadi merah ketika cursor berada di atasnya.Untuk lebih jelasnya silahkan anda buat file baru di notepad/sublimetext dan simpan dengan nama pseudocalss.html lalu ketikkan kode beikut:
<!DOCTYPE html>hasil dari kode diatas adalah:
<html>
<head>
<title>Psuedo class</title>
<style type="text/css" media="screen">
a:hover { color : red; }
</style>
</head>
<body>
<a href="#">Demosntrasi pseudo class hover</a><br>
<a href="#">Demosntrasi pseudo class hover</a>
</body>
</html>
Pseudo-Class untuk Link/Anchor
Ada beberapa pseudo-class untuk anchor/link yakni :/* untuk link yang belum di klik */
a:link { color: blue; }
/* untuk link yang sudah di klik */
a:visited { color:green; }
/* ketika cursor berada di atas link */
a:hover { color:red; }
/* ketika link dalam keadaan aktif atau terpilih */
a:active { color: orange; }
Tersedia di Bacacoding:
- Cara memposisiskan website menjadi relative
- Cara memposisiskan website menjadi Absolute
- Cara memposisiskan website menjadi Fixed
Perhatikan juga urutan ketika penulisan semua pseudo class tersebut (Jika anda bermaksud menuliskan seluruh pseudo class untuk link):
:hover harus ditulis sesudah :link dan :visited
:active harus ditulis sesudah :hover.
Jika tidak demikian maka efek tersebut tidak akan berjalan dengan baik.
Pseudo Class :hover dan :active tidak hanya bisa digunakan untuk link saja melainkan bisa diterapkan pada elemen/tag-tag HTML lainnya. Masih ingat dengan demonstrasi Image Sprite pada bab sebelumnya?
Pseudo-Class :first-child dan :last-child
Selain pseudo-class untuk link/anchor ada juga pseudo class :first-child dan :last-child. Keduanya digunakan untuk memilih elemen pertama dan terakhir dari suatu selector.
Misalnya kita mempunyai sebuah unordered list (ul), dengan beberapa list-item di dalamnya. Kita bisa memberikan style khusus untuk list-item yang pertama dan yang terakhir dengan menggunakan :first-child dan :last-child.
<ul>Dan Jika kita tambahkan style berikut :
<li>Item ke 1</li>
<li>Item ke 2</li>
<li>Item ke 3</li>
<li>Item ke 4</li>
<li>Item ke 5</li>
</ul>
ul li:first-child{ color:green; }Slahkan anda buat file baru dan simpan dengan nama "pseudoclas_child_parent.html" lalu ketikkan kode berikut:
ul li:last-child{ color:orange; }
<!DOCTYPE html>Hasil dari kode diatas adalah seperti berikut:
<html>
<head>
<title>Psuedo class</title>
<style type="text/css" media="screen">
ul li:first-child{ color:green; }
ul li:last-child{ color:orange; }
</style>
</head>
<body>
<ul>
<li>Item ke 1</li>
<li>Item ke 2</li>
<li>Item ke 3</li>
<li>Item ke 4</li>
<li>Item ke 5</li>
</ul>
</body>
</html>
List-item yang pertama akan memiliki warna huruf hijau dan yang terakhir memiliki warna orange. Tidak hanya pada unordered list, andapun dapat menerapkannya pada deretan elemen lainnya. Misalnya elemen p yang terdapat dalam suatu div.
<div>Nah Bagaimana…? apakah sekarang kamu sudah mengerti apa itu Pseudo-Class: Cara Memberikan Efek Ketika Cursor Berada Diatas Suatu Elemen (hover)? Mungkin itu saja tulisan yang membahas tentang Pseudo-Class: Cara Memberikan Efek Ketika Cursor Berada Diatas Suatu Elemen (hover), jika terdapat kekurangan ataupun kesalahan dalam penulisan mohon di maafkan dan perbaiki atau lengkapi saja jika terdapat kesalahan. Kalau memang tulisan ini bermanfaat tidak ada salahnya jika men-Sharenya kepada teman kamu yang lain, sekian dan terimakasih.
<p> Paragraf pertama </p>
<p> Paragraf kedua </p>
<p> Paragraf ketiga </p>
<p> Paragraf keempat </p>
</div>
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon