Belajar CSS #4: Perbedaan Pseudo Class dan Pseudo Elemen

Saat mempelajari CSS lebih dalam, kamu akan menemukan dua fitur penting yang sering digunakan untuk membuat tampilan website menjadi lebih interaktif dan menarik, yaitu pseudo class dan pseudo elemen. Keduanya memiliki sintaks yang hampir mirip, tetapi fungsi dan cara kerjanya sangat berbeda. Karena itulah banyak pemula yang sering bingung membedakan kapan harus menggunakan pseudo class dan kapan harus menggunakan pseudo elemen.

Pada tutorial ini, kamu akan mempelajari perbedaan pseudo class dan pseudo elemen CSS secara lengkap, mulai dari pengertian, fungsi, sintaks, contoh penggunaan, kelebihan, kekurangan hingga studi kasus penerapannya dalam pengembangan website modern.

Apa Itu Pseudo Class?

Pseudo class adalah jenis selektor CSS yang digunakan untuk menargetkan elemen berdasarkan kondisi, status, atau posisi tertentu tanpa perlu menambahkan class baru pada elemen HTML. Menurut spesifikasi CSS dari World Wide Web Consortium (W3C), pseudo class memungkinkan pengembang menerapkan gaya pada elemen yang sedang berada dalam keadaan tertentu, seperti saat kursor diarahkan ke elemen (:hover), ketika elemen menerima fokus (:focus), atau berdasarkan urutan elemen dalam struktur dokumen (:nth-child).

Dengan menggunakan pseudo class, developer dapat menciptakan interaksi yang lebih dinamis dan meningkatkan pengalaman pengguna tanpa harus menambahkan JavaScript untuk kebutuhan sederhana.

Baca Juga: Belajar HTML #2: Apa Itu Tag, Elemen dan Atribut Pada HTML

Contoh Pseudo Class yang Umum Digunakan:

1. :hover – Menerapkan gaya saat elemen di-hover oleh kursor.
2. :focus – Menerapkan gaya pada elemen yang sedang aktif atau fokus (biasanya pada input form).
3. :nth-child() – Menargetkan elemen berdasarkan urutan atau posisi.
4. :first-child dan :last-child – Menerapkan gaya pada elemen pertama atau terakhir dalam konteks induknya.
5. :active – Menerapkan gaya pada elemen yang sedang diklik.
6. :visited – Menerapkan gaya pada tautan yang sudah pernah dikunjungi.

Contoh Penggunaan Pseudo-Class

a:hover {
  color: red;
  text-decoration: underline;
}
Code language: CSS (css)

Pada contoh di atas, setiap elemen <a> (tautan) akan berubah warna menjadi merah dan diberi garis bawah ketika dihover oleh kursor.

input:focus {
  border-color: blue;
  outline: none;
}
Code language: CSS (css)

Dalam kode ini, elemen <input> akan memiliki border berwarna biru saat elemen tersebut aktif atau fokus, biasanya ketika pengguna mengklik atau menekan tombol Tab pada elemen input tersebut.

Baca Juga: Belajar CSS #1: CSS Adalah, Pengertian Dan Praktik Terbaik 

Daftar Pseudo Class Lainnya dan Fungsinya

• :first-child — Menargetkan elemen pertama dari tipe elemen dalam sebuah container.
• :last-child — Menargetkan elemen terakhir.
• :nth-of-type(n) — Menargetkan elemen berdasarkan urutan dalam tipe yang sama.
• :not(selector) — Menargetkan elemen yang tidak cocok dengan selektor tertentu.

Contoh tambahan:

li:nth-child(2n) {
  background-color: #f0f0f0;
}
Code language: CSS (css)

Dengan contoh di atas, setiap elemen <li> yang memiliki urutan genap (2, 4, 6, dst.) akan memiliki latar belakang abu-abu. Ini memungkinkan kita menciptakan efek zebra pada tabel atau daftar.

Kelebihan Pseudo Class

• Interaktif: Pseudo class memungkinkan kita menambahkan interaktivitas sederhana tanpa perlu JavaScript, misalnya pada efek hover atau klik.
• Detail Kontrol: Bisa menargetkan elemen berdasarkan urutan atau kondisi khusus yang sulit dilakukan dengan selektor biasa.
• Efisiensi Kode: Mengurangi jumlah kode CSS dan JavaScript yang diperlukan untuk mengontrol tampilan elemen berdasarkan kondisi tertentu.

Kekurangan Pseudo Class

• Terbatas: Pseudo class hanya berlaku pada kondisi yang sudah ditentukan di CSS, sehingga tidak sefleksibel JavaScript.
• Keterbatasan Browser: Beberapa pseudo class, terutama yang lebih kompleks seperti :nth-child, mungkin tidak didukung oleh browser versi lama.

Baca Juga: Belajar CSS #2: Sintaks Dasar CSS untuk Pemula 

Apa Itu Pseudo Elemen?

Pseudo elemen adalah fitur CSS yang digunakan untuk menargetkan bagian tertentu dari sebuah elemen HTML atau menambahkan konten visual tanpa mengubah struktur HTML asli. Pseudo elemen memungkinkan developer mengatur huruf pertama, baris pertama, maupun menambahkan elemen dekoratif melalui ::before dan ::after.

Kehadiran pseudo elemen sangat membantu dalam meningkatkan tampilan antarmuka website karena memungkinkan proses styling yang lebih fleksibel, bersih, dan efisien tanpa menambah elemen HTML yang tidak diperlukan.

Contoh Pseudo Elemen yang Umum Digunakan:

1. ::before — Menambahkan konten atau elemen sebelum elemen target.
2. ::after — Menambahkan konten atau elemen setelah elemen target.
3. ::first-line — Menargetkan baris pertama dari elemen teks.
4. ::first-letter — Menargetkan huruf pertama dari elemen teks.

Contoh Penggunaan Pseudo Elemen

1. Menggunakan ::before dan ::after

p::before {
  content: ">> ";
  color: gray;
}
p::after {
  content: " <<";
  color: gray;
}
Code language: CSS (css)

Dalam contoh ini, setiap paragraf <p> akan memiliki teks “>>” sebelum dan “<<” setelah konten utama paragraf. Properti content memungkinkan kita menambahkan teks atau karakter dekoratif tanpa mengubah HTML.

2. Menggunakan ::first-letter dan ::first-line

p::first-letter {
    font-size: 2em;
    color: red;
}

p::first-line {
    font-weight: bold;
}
Code language: CSS (css)

Pada kode di atas, huruf pertama dari setiap paragraf <p> akan memiliki ukuran dua kali lipat lebih besar dari ukuran font standar dan berwarna merah, sementara baris pertama akan dicetak tebal.

Baca Juga: Belajar CSS #3: Selektor CSS, Jenis dan Contoh Penerapan

Daftar Pseudo Elemen Lainnya dan Fungsinya

• ::selection — Menargetkan teks yang dipilih (highlight) oleh pengguna.
• ::placeholder — Menargetkan placeholder dalam elemen input form.

Contoh tambahan:

::selection {
    background: yellow;
    color: black;
}
Code language: CSS (css)

Pada kode ini, teks apa pun yang dipilih pengguna di halaman akan memiliki latar belakang kuning dan warna teks hitam. Efek ini sering digunakan untuk meningkatkan pengalaman pengguna saat memilih teks.

Kelebihan Pseudo Elemen

• Mempermudah Tata Letak Spesifik: Dapat menambahkan gaya pada bagian tertentu dari elemen, seperti huruf atau baris pertama, tanpa perlu HTML tambahan.
• Meningkatkan Estetika: Memungkinkan penambahan elemen dekoratif seperti ikon atau karakter hias yang menambah estetika halaman.
• Efisiensi Kode: Mengurangi kebutuhan untuk menambah elemen HTML hanya untuk tujuan styling atau dekorasi.

Kekurangan Pseudo Elemen

• Fungsi Terbatas: Pseudo elemen terbatas pada bagian tertentu dari elemen, sehingga tidak dapat digunakan untuk berbagai efek kompleks.
• Kompatibilitas Browser: Beberapa pseudo elemen mungkin tidak didukung sepenuhnya di semua browser, terutama di versi lama.

Perbedaan Antara Pseudo Class dan Pseudo Elemen

Meskipun pseudo class dan pseudo elemen terlihat mirip, keduanya memiliki perbedaan mendasar:

1. Kegunaan: Pseudo class digunakan untuk menargetkan elemen berdasarkan kondisi tertentu, sementara pseudo elemen digunakan untuk menargetkan bagian spesifik dari elemen tersebut.
2. Sintaks: Pseudo class menggunakan satu titik dua (:) sedangkan pseudo elemen menggunakan dua titik dua (::). Ini adalah konvensi yang diperkenalkan di CSS3 untuk membedakan keduanya, meskipun pada beberapa browser pseudo elemen seperti :before dan :after masih berfungsi dengan satu titik dua.

Baca Juga: Tutorial Lengkap CSS Anchor Positioning Modern 

Kesimpulan

Pada pembahasan di atas dapat disimpulkan bahwa Perbedaan pseudo class dan pseudo elemen CSS terletak pada objek yang ditargetkan. Pseudo class digunakan untuk menyeleksi elemen berdasarkan kondisi, status, atau posisinya dalam dokumen HTML, sedangkan pseudo elemen digunakan untuk menyeleksi bagian tertentu dari sebuah elemen seperti huruf pertama, baris pertama, atau menambahkan konten melalui ::before dan ::after.

Dengan memahami fungsi pseudo class dan pseudo elemen, kamu dapat membuat tampilan website yang lebih interaktif, rapi, dan profesional tanpa perlu menambahkan banyak kode HTML maupun JavaScript. Penguasaan kedua selektor ini merupakan dasar penting dalam pengembangan antarmuka web modern menggunakan CSS.

Artikel ini merupakan bagian dari seri BELAJAR CSS KantinIT.com. Jika artikel ini bermanfaat, jangan lupa bagikan ke media sosial atau ke teman kamu.