Pseudo-Class: Cara Memberikan Efek Ketika Cursor Berada Diatas Suatu Elemen (hover)

A. Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”. Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan. Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet. Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.

Baca Juga : Cara Memposisikan Website Menjadi Fixed (Posistioning Fixed CSS)

Fungsi CSS
fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.

Cara Kerja CSS
cara kerja css itu sangatlah mudah, kita hanya perlu menulis stylenya(selector id dan class tersesuaikan) maka secara otomatis akan bekerja pada document html.

B. Pengertian Pseudo Class
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:

hasil dari kode diatas adalah:

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

Dan Jika kita tambahkan style berikut :

ul li:first-child{ color:green; }
ul li:last-child{ color:orange; }

Slahkan anda buat file baru dan simpan dengan nama "pseudoclas_child_parent.html" lalu ketikkan kode berikut:

Hasil dari kode diatas adalah seperti berikut:

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>
<p> Paragraf pertama </p>
<p> Paragraf kedua </p>
<p> Paragraf ketiga </p>
<p> Paragraf keempat </p>
</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.