Pseudo class dan pseudo element adalah fitur yang sangat berguna dalam CSS yang memungkinkan pengguna untuk memilih dan memodifikasi elemen tertentu dalam dokumen HTML. Dalam artikel ini, kami akan membahas secara detail tentang pseudo class dan pseudo element di CSS, serta bagaimana menggunakannya untuk mencapai efek yang diinginkan pada halaman web.
Pseudo class adalah kata kunci yang digunakan untuk memilih elemen tertentu dalam keadaan tertentu. Misalnya, kita dapat menggunakan pseudo class untuk memilih elemen saat mouse berada di atasnya (:hover), ketika diklik (:active), atau ketika memiliki fokus (:focus). Pseudo class ditandai dengan tanda titik dua (:) diikuti oleh nama pseudo class.
Pseudo Class di CSS: Pengenalan dan Penggunaan
Setelah memahami konsep dasar pseudo class, mari kita jelajahi beberapa pseudo class yang paling umum digunakan dalam CSS. Pseudo class yang akan kita bahas meliputi :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-of-type, :not, dan lainnya.
Pseudo Class :hover
Pseudo class :hover digunakan untuk memilih dan memodifikasi elemen saat mouse berada di atasnya. Ini berguna untuk membuat efek hover, seperti perubahan warna latar belakang atau tampilan elemen. Misalnya, kita dapat menggunakan pseudo class :hover untuk mengubah warna latar belakang tombol saat mouse berada di atasnya, memberikan umpan balik visual kepada pengguna bahwa tombol tersebut dapat diklik.
Dalam contoh berikut, kita akan mengubah warna latar belakang tombol menjadi merah saat mouse berada di atasnya:
“`css.button:hover {background-color: red;}“`
Pseudo Class :active
Pseudo class :active memilih dan memodifikasi elemen saat sedang dalam keadaan aktif atau sedang diklik oleh pengguna. Ini sering digunakan untuk memberikan umpan balik visual saat tombol atau elemen lainnya ditekan. Misalnya, kita dapat menggunakan pseudo class :active untuk mengubah warna latar belakang tombol saat tombol tersebut sedang ditekan oleh pengguna.
Dalam contoh berikut, kita akan mengubah warna latar belakang tombol menjadi hijau saat tombol tersebut sedang ditekan:
“`css.button:active {background-color: green;}“`
Pseudo Class :focus
Pseudo class :focus digunakan untuk memilih dan memodifikasi elemen saat memiliki fokus. Ini berguna dalam formulir atau elemen interaktif lainnya, di mana kita ingin membedakan elemen yang sedang aktif. Misalnya, ketika pengguna mengklik dalam sebuah input, kita dapat menggunakan pseudo class :focus untuk mengubah warna latar belakang input tersebut, memberikan indikasi visual bahwa input tersebut sedang aktif dan siap untuk menerima input dari pengguna.
Dalam contoh berikut, kita akan mengubah warna latar belakang input menjadi kuning saat input tersebut sedang memiliki fokus:
“`cssinput:focus {background-color: yellow;}“`
Pseudo Class :first-child
Pseudo class :first-child memilih elemen pertama dalam elemen induknya. Ini dapat digunakan untuk memodifikasi gaya elemen pertama dalam daftar atau dalam struktur HTML lainnya. Misalnya, jika kita memiliki daftar item dan ingin memberikan penanda khusus pada elemen pertama dalam daftar tersebut, kita dapat menggunakan pseudo class :first-child.
Dalam contoh berikut, kita akan memberikan penandaan pada elemen pertama dalam daftar dengan menggunakan pseudo class :first-child:
“`cssli:first-child {font-weight: bold;}“`
Pseudo Class :last-child
Pseudo class :last-child memilih elemen terakhir dalam elemen induknya. Ini berguna untuk memodifikasi gaya elemen terakhir dalam daftar atau struktur HTML lainnya. Misalnya, jika kita memiliki daftar item dan ingin memberikan penanda khusus pada elemen terakhir dalam daftar tersebut, kita dapat menggunakan pseudo class :last-child.
Dalam contoh berikut, kita akan memberikan penandaan pada elemen terakhir dalam daftar dengan menggunakan pseudo class :last-child:
“`cssli:last-child {color: red;}“`
Pseudo Class :nth-child
Pseudo class :nth-child memilih elemen yang berada pada posisi tertentu dalam elemen induknya. Ini memungkinkan kita untuk memilih dan memodifikasi elemen berdasarkan pola atau urutan tertentu. Misalnya, jika kita memiliki daftar item dan ingin memberikan gaya berbeda pada elemen-elemen ganjil, kita dapat menggunakan pseudo class :nth-child(odd).
Dalam contoh berikut, kita akan memberikan gaya berbeda pada elemen-elemen ganjil dalam daftar dengan menggunakan pseudo class :nth-child(odd):
“`cssli:nth-child(odd) {background-color: lightgray;}“`
Pseudo Class :nth-of-type
Pseudo class :nth-of-type mirip dengan :nth-child, tetapi hanya memilih elemen yang memiliki tipe yang sama dalam elemen induknya. Ini berguna jika kita hanya ingin memilih elemen dengan tipe tertentu dalam struktur HTML. Misalnya, jika kita memiliki daftar item yang terdiri dari elemen div dan p, dan ingin memberikan gaya berbeda pada elemen-elemen p yang berada pada posisi tertentu dalam daftar tersebut, kita dapat menggunakan pseudo class :nth-of-type.
Dalam contoh berikut, kita akan memberikan gaya berbeda pada elemen-elemen p yang berada pada posisi tertentu dalam daftar dengan menggunakan pseudo class :nth-of-type:
“`cssp:nth-of-type(2n) {color: blue;}“`
Pseudo Class :not
Pseudo class :not memilih elemen yang tidak cocok dengan selektor yang ditentukan. Ini memberikan fleksibilitas dalam pemilihan elemen, karena kita dapat memilih semua elemen kecuali yang kita tentukan. Misalnya, jika kita memiliki daftar item dan ingin memberikan gaya pada semua elemen kecuali yang memiliki kelas “special”, kita dapat menggunakan pseudo class :not.
Dalam contoh berikut, kita akan memberikan gaya pada semua elemen teks kecuali yang memiliki kelas “special” dengan menggunakan pseudo class :not:
“`cssp:not(.special) {font-size: 14px;}“`
Pseudo Element di CSS: Pengenalan dan Penggunaan
Pseudo element adalah representasi virtual dari elemen tertentu dalam dokumen. Mereka memungkinkan kita untuk menambahkan konten atau mengubah tampilan elemen tanpa harus mengubah struktur HTML. Untuk menggunakan pseudo element, kita menggunakan tanda titik dua (::) diikuti oleh nama pseudo element.
Pseudo Element ::before
Pseudo element ::before digunakan untuk menambahkan konten sebelum isi elemen yang dipilih. Ini berguna untuk menambahkan ikon atau dekorasi lainnya sebelum teks atau elemen lainnya. Misalnya, jika kita ingin menambahkan tanda panah sebelum setiap tautan dalam sebuah daftar, kita dapat menggunakan pseudo element ::before.
Dalam contoh berikut, kita akan menambahkan tanda panah sebelum setiap tautan dalam daftar dengan menggunakan pseudo element ::before:
“`cssli a::before {content: “➤”;margin-right: 5px;}“`
Pseudo Element ::after
Pseudo element ::after mirip dengan ::before, tetapi digunakan untuk menambahkan konten setelah isi elemen yang dipilih. Ini juga berguna untuk menambahkan ikon atau dekorasi lainnya setelah teks atau elemen lainnya. Misalnya, jika kita ingin menambahkan tanda centang setelah setiap elemen yang memiliki kelas “completed” dalam sebuah daftar, kita dapat menggunakan pseudo element ::after.
Dalam contoh berikut, kita akan menambahkan tanda centang setelah setiap elemen yang memiliki kelas “completed” dalam daftar dengan menggunakan pseudo element ::after:
“`cssli.completed::after {content: “✔”;margin-left: 5px;}“`
Pseudo Element ::first-letter
Pseudo element ::first-letter digunakan untuk memilih dan memodifikasi huruf pertama dalam elemen yang dipilih. Ini berguna untuk memberikan gaya khusus pada huruf pertama dalam paragraf atau judul. Misalnya, jika kita ingin memberikan gaya berbeda pada huruf pertama dalam setiap paragraf, kita dapat menggunakan pseudo element ::first-letter.
Dalam contoh berikut, kita akan memberikan gaya berbeda pada huruf pertama dalam setiap paragraf dengan menggunakan pseudo element ::first-letter:
“`cssp::first-letter {font-size: 24px;font-weight: bold;color: red;}“`
Pseudo Element ::first-line
Pseudo element ::first-line digunakan untuk memilih dan memodifikasi baris pertama dalam elemen yang dipilih. Ini berguna untuk memberikan gaya khusus pada baris pertama dalam paragraf atau judul. Misalnya, jika kita ingin memberikan gaya berbeda pada baris pertama dalam setiap paragraf, kita dapat menggunakan pseudo element ::first-line.
Dalam contoh berikut, kita akan memberikan gaya berbeda pada baris pertama dalam setiap paragraf dengan menggunakan pseudo element ::first-line:
“`cssp::first-line {font-weight: bold;color: blue;}“`
Pseudo Element ::selection
Pseudo element ::selection digunakan untuk memilih dan memodifikasi teks yang dipilih oleh pengguna. Ini berguna untuk memberikan gaya pada teks yang dipilih, seperti mengubah warna latar belakang atau warna teks. Misalnya, jika kita ingin mengubah warna teks yang dipilih menjadi merah dan warna latar belakang menjadi kuning, kita dapat menggunakan pseudo element ::selection.
Dalam contoh berikut, kita akan mengubah warna teks yang dipilih menjadi merah dan warna latar belakang menjadi kuning:
“`css::selection {color: red;background-color: yellow;}“`
Kesimpulan
Pseudo class dan pseudo element adalah fitur yang kuat dalam CSS yang memungkinkan kita untuk memilih dan memodifikasi elemen tertentu dalam dokumen HTML. Dengan pemahaman yang baik tentang pseudo class dan pseudo element, kita dapat mencapai efek yang diinginkan dan meningkatkan tampilan dan interaksi pada halaman web kita.
Disclaimer
Informasi dalam artikel ini disediakan hanya untuk tujuan informasi. Penulis dan penerbit tidak bertanggung jawab atas keakuratan, kelengkapan, keandalan, atau kegunaan dari informasi yang disediakan dalam artikel ini. Setiap tindakan yang Anda lakukan berdasarkan informasi yang Anda temukan dalam artikel ini sepenuhnya menjadi tanggung jawab Anda. Selalu lakukan penelitian Anda sendiri dan konsultasikan dengan profesional sebelum mengambil keputusan yang berkaitan dengan subjek yang dibahas dalam artikel ini.
