Belajar CSS #4: Perbedaan Pseudo-Class dan Pseudo-Elemen

Dalam CSS, selain selektor dasar seperti tag, kelas dan id, terdapat jenis selektor lain yang lebih spesifik dan memungkinkan kita menargetkan elemen berdasarkan kondisi atau bagian tertentu dari elemen tersebut. Selektor ini dikenal dengan nama pseudo-class dan pseudo-element. Keduanya memungkinkan kita memberikan gaya lebih rinci dan interaktif pada elemen, seperti perubahan gaya saat elemen di-hover, mengatur tampilan huruf pertama pada paragraf atau menata elemen berdasarkan urutan.

Pada artikel ini akan mengulas sepenuhnya mengenai pseudo-class dan pseudo-element secara mendalam, termasuk cara kerjanya, contoh penggunaannya, serta kelebihan dan kekurangannya.

Apa Itu Pseudo-Class?

Pseudo-class adalah selektor yang menargetkan elemen HTML berdasarkan kondisi atau keadaan tertentu. Dengan pseudo-class, kita bisa menerapkan gaya berdasarkan status elemen seperti ketika elemen sedang di-hover, saat elemen pertama dari sebuah jenis atau ketika elemen sedang dalam fokus.

Pseudo-class menggunakan tanda titik dua (:) diikuti oleh nama pseudo-class yang akan diterapkan.

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

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

input:focus {
    border-color: blue;
    outline: none;
}

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.

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

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.

Apa Itu Pseudo-Element?

Pseudo-element digunakan untuk menargetkan dan menata bagian tertentu dari elemen, seperti huruf atau baris pertama dalam paragraf atau bahkan menambahkan elemen sebelum atau sesudah elemen lain. Dengan pseudo-element, kita dapat membuat efek yang lebih spesifik pada elemen tanpa perlu menambah tag HTML tambahan di dalam kode HTML.

Pseudo-element menggunakan dua titik dua (::) diikuti oleh nama pseudo-element.

Contoh Pseudo-Element 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-Element

1. Menggunakan ::before dan ::after

p::before {
    content: ">> ";
    color: gray;
}
p::after {
    content: " <<";
    color: gray;
}

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

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.

Daftar Pseudo-Element 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;
}

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

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

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

Perbedaan Antara Pseudo-Class dan Pseudo-Element

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

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

Kesimpulan

Pada pembelajaran kita diatas dapat kita simpulkan bahwa Pseudo-class dan pseudo-element adalah fitur CSS yang sangat berguna untuk memberikan tampilan yang lebih interaktif dan detail pada halaman web. Pseudo-class memungkinkan kita untuk menerapkan gaya berdasarkan kondisi atau status elemen seperti hover, focus dan urutan anak. Sementara itu, pseudo-element memungkinkan kita menargetkan bagian spesifik dari elemen, seperti huruf atau baris pertamaatau bahkan menambahkan elemen dekoratif dengan ::before dan ::after.

Pemahaman mendalam tentang kedua jenis selektor ini akan membantu kamu menciptakan halaman web yang lebih dinamis dan estetik, tanpa perlu tambahan elemen HTML atau JavaScript. Namun, perlu diingat bahwa penggunaannya harus disesuaikan dengan kebutuhan dan kompatibilitas browser agar hasilnya optimal.

Artikel ini merupakan bagian seri artikel BELAJAR CSS dari KantinIT.com dan jika ada ide topik yang mau kami bahas silahkan komen di bawah ya..