Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 14 : Cara Menggunakan Properti Z-Index di CSS. Selanjutnya, kita akan mempelajari cara menggunakan pseudo class di CSS.
Pseudo class pada CSS digunakan untuk menambahkan efek khusus ke beberapa selector. Struktur kode sederhana untuk pseudo-class adalah sebagai berikut :
selector:pseudo-class {property: value}
Class CSS juga dapat digunakan pada pseudo class :
selector.class:pseudo-class {property: value}
Nilai pseudo-class yang paling umum digunakan adalah sebagai berikut :
No. | Nilai & Deskripsi |
1 | :link Class ini digunakan untuk menambahkan gaya khusus ke link yang belum dikunjungi. |
2 | :visited Class ini digunakan untuk menambahkan gaya khusus ke link yang sudah dikunjungi. |
3 | :hover Class ini digunakan untuk menambahkan gaya khusus ke elemen saat Anda mengarahkan mouse di atasnya. |
4 | :active Class ini digunakan untuk menambahkan gaya khusus ke elemen aktif. |
5 | :focus Class ini digunakan untuk menambahkan gaya khusus ke elemen yang ingin kita fokuskan. |
6 | :first-child Class ini digunakan untuk menambahkan gaya khusus ke elemen yang merupakan anak pertama dari beberapa elemen lainnya. |
7 | :lang Class ini digunakan untuk menentukan bahasa yang akan digunakan dalam elemen tertentu. |
Saat mendefinisikan pseudo-class dalam blok <style> … </style>, hal-hal berikut harus diperhatikan :
- a: hover HARUS digunakan pertama sebelum :link dan a: dikunjungi dalam penulisan kode CSS agar efektif.
- a: active HARUS digunakan setelah :hover dalam penulisan kode CSS agar efektif.
- Nama pseudo class tidak membedakan huruf besar dan kecil.
- Pseudo class tidak sama dengan class pada CSS, tetapi dapat digabungkan.
Pseudo-class :link
Contoh berikut menunjukkan cara menggunakan pseudo-class : link untuk mengatur warna link. Nilai yang digunakan dapat berupa nama warna apa pun dalam format apa pun yang valid.
<html> <head> <style type = "text/css"> a:link {color:green} </style> </head> <body> <a href = "#">Link berwarna hijau </a> </body> </html>
Browser akan menampilkan hasil sebagai berikut :
Pseudo-class :visited
Berikut ini adalah contoh cara penggunaa pseudo-class :visited untuk menunjukka bahwa sebuah link sudah pernah dikunjungi sebelumnya.
Nilai yang biasanya digunakan dapat berupa nama warna apa pun dalam format apa pun yang valid.
<html> <head> <style type = "text/css"> a:visited {color: red} </style> </head> <body> <a href = "#">Setelah diklik, link ini akan berwarna merah </a> </body> </html>
Browser akan menampilkan hasil sebegai berikut. Setelah Anda mengklik tautan ini, link akan berubah warna menjadi merah.
Pseudo-class :hover
Contoh berikut menunjukkan cara menggunakan pseudo-class :hover untuk mengubah warna tautan saat kita mengarahkan penunjuk mouse ke tautan itu.
Nilai yang biasanya digunakan dapat berupa nama warna apa pun dalam format apa pun yang valid.
<html> <head> <style type = "text/css"> a:hover {color: #FFCC00} </style> </head> <body> <a href = "#">Bawa mouse ke sini </a> </body> </html>
Kode ini akan menghasilkan tautan berikut. Sekarang, silahkan arahkan mouse ke tautan ini dan Anda akan melihat bahwa link akan berubah warna menjadi kuning.
Pseudo-class :active
Contoh berikut menunjukkan cara menggunakan pseudo-class :active untuk mengubah warna tautan aktif. Nilai yang digunakan dapat berupa nama warna apa pun dalam format apa pun yang valid.
<html> <head> <style type = "text/css"> a:active {color: #FF00CC} </style> </head> <body> <a href = "#">Klik link ini </a> </body> </html>
Browser akan menampilkan hasil link seperti berikut. Saat pengguna mengkliknya, warnanya berubah menjadi merah muda.
Pseudo-class :focus
Contoh berikut menunjukkan cara menggunakan pseudo-class :focus untuk mengubah warna tautan fokus. Nilai yang biasanya digunakan dapat berupa nama warna apa pun dalam format apa pun yang valid.
<html> <head> <style type = "text/css"> input:focus {color: #0000FF} </style> </head> <body> <form action=”register.php” method=get> <p>Nama : <input type=”text” name=”nama”></p> <p>Kelas : <input type=”text” name=”kelas”></p> </form> </body> </html>
Kode ini akan menghasilkan kolom input berikut. Silahkan pilih salah satu kolom, kolom yang Anda fokuskan akan berwarna orange.
Ketika Anda berpindah kolom input, maka warna kolom akan berubah hanya pada kolom yag Ada fokuskan saja.
Pseudo-class: first-child
Pseudo-class: first-child mencocokkan elemen yang merupakan turunan pertama dari elemen lain dan menambahkan gaya khusus ke elemen tersebut yang merupakan turunan pertama dari beberapa elemen lainnya.
Misalnya, untuk membuat indentasi paragraf pertama dari semua elemen <div>, Anda dapat menggunakan definisi ini :
<html> <head> <style type = "text/css"> div > p:first-child { text-indent: 25px; } </style> </head> <body> <div> <p>Paragraph pertama dalam div. Paragraph ini akan di indented</p> <p>Paragraph kedua dalam div. Paragraph ini tidak akan di indented</p> </div> <p>Parapgraph ini tidak cocok sebagai first-child dari tag div dalam dokumen HTML ini</p> <div> <h3>Heading</h3> <p>Ini adalah paragraph pertama di dalam tag div. Paragraph ini tidak akan terpengaruh.</p> </div> </body> </html>
Browser akan menampilkan hasil sebagai berikut :
Semoga tutorial ini membantu Anda untuk mempelajari cara menggunakan pseudo class di CSS untuk memberi efek pada elemen HTML.
0 Komentar