Mengenal Pseudo-Class di CSS
Halo teman-teman, Pada artikel ini, kami akan menjelaskan daftar pseudo-class yang paling umum digunakan di CSS (Cascading style sheet) untuk styling yang lebih baik dan menambah interaktifitas kepada user.
Tetapi sebelum itu, mari kita lihat apa sebenarnya kelas semu dan bagaimana menerapkannya dengan benar.
Pseudo-Class CSS
Sebagai permulaan, pseudo-class digunakan untuk mendefinisikan status khusus suatu elemen. Misalnya, ketika sebuah tombol ditekan, ketika sebuah teks hover, dan 100 kondisi lainnya, sesuatu akan berubah atau terjadi. Pada dasarnya adalah event handler untuk penggunaan yang sederhana.
dari MDN, Pseudo-class memungkinkan Anda menerapkan gaya ke elemen tidak hanya dalam kaitannya dengan dokumen konten tree, tetapi juga dalam kaitannya dengan faktor eksternal seperti riwayat navigator (:visited, misalnya), status kontennya (seperti :checked pada elemen formulir tertentu), atau posisi mouse (seperti :hover, yang memungkinkan Anda mengetahui apakah mouse berada di atas elemen atau tidak).
Sintaks Pseudo-Class CSS
Untuk menggunakan pseudo-class di CSS, kita menggunakan : (titik dua ganda) setelah memanggil elemen. Kurang lebih kodenya seperti di bawah ini :
<selector>:<pseudo-class>
Dalam real world case, kurang lebih tulisannya seperti di bawah ini:
.heading:hover { color: #fff }
Dengan kode di atas, kita membuat bahwa ketika elemen dengan kelas bernama “heading” berada dalam status hover, warna elemen akan berubah menjadi putih saat elemen dalam status hover. Jika elemen tidak lagi dalam keadaan hover, maka warna elemen akan kembali ke warna aslinya.
**note
Titik dua ganda (::) diperkenalkan di CSS3 untuk membedakan pseudo-element seperti ::before dan ::after dari pseudo-class seperti :hover dan :active. Semua browser mendukung titik dua ganda untuk elemen semu kecuali Internet Explorer (IE) 8 dan di bawahnya.
Perbedaan antara pseudo-class, dan pseudo-element adalah dari MDN
Pseudo-Class yang paling sering digunakan
:hover
Seperti contoh di atas, status hover — seperti namanya — dipicu saat elemen diarahkan oleh kursor atau yang lainnya:
:focus
Kelas semu fokus digunakan untuk elemen input saat fokus:
seperti yang Anda lihat dari GIF di atas, saat elemen difokuskan, muncul garis besar yang menguraikan elemen. Agar itu terjadi, kami menggunakan :focus pseudo-class.
untuk melihat semua pseudo-class, kunjungi tautan berikut.
Terima kasih telah membaca sejauh ini, semoga Anda bisa mendapatkan sesuatu dari artikel ini!!