Pseudo-class & Pseudo-element di CSS

Pseudo-class & Pseudo-element adalah dua fitur penting di CSS yang sangat membantu dalam mengatur tampilan elemen tanpa harus menambah kelas atau tag baru di HTML. Dengan memahami keduanya, kalian bisa membuat efek interaktif dan tampilan yang lebih rapi serta profesional.

Halo teman-teman, semoga kalian dalam keadaan baik dan tetap semangat belajar ngoding. Pada artikel ini kodelyly.com akan membahas Pseudo-class & Pseudo-element secara perlahan dan mudah dipahami, sehingga cocok untuk kalian yang masih pemula maupun yang ingin mengulang dasar CSS.

Pseudo_class & Pseudo_element Di CSS

Secara sederhana, pseudo-class digunakan untuk menarget elemen berdasarkan keadaan atau kondisi tertentu, seperti saat di-hover, fokus, atau posisi khusus dalam sebuah daftar. Sementara itu, pseudo-element digunakan untuk menarget bagian tertentu dari elemen, seperti baris pertama teks, huruf pertama, atau menambahkan konten dekoratif sebelum dan sesudah elemen.

Apa Itu Pseudo_class?

Pseudo-class adalah “kelas semu” yang diawali dengan tanda titik dua, misalnya :hover, :focus, atau :first-child. Pseudo-class tidak mengubah struktur HTML, tetapi mengatur gaya ketika elemen berada pada kondisi tertentu.

Beberapa contoh pseudo-class yang sering digunakan antara lain:

1. :hover untuk saat kursor berada di atas elemen.
2. :focus untuk saat elemen (seperti input) sedang aktif diklik atau diberi fokus.
3. :active untuk saat elemen sedang ditekan (misalnya tombol).
4. :first-child atau :last-child untuk memilih elemen pertama atau terakhir di dalam parent.

Contoh sederhana penggunaan pseudo-class:

<a href="#" class="btn">Arahkan kursor ke sini</a>
<input type="text" placeholder="Klik untuk fokus">

a.btn {
  padding: 10px 20px;
  border-radius: 6px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
}

a.btn:hover {
  background-color: #6c5ce7;
}

input:focus {
  outline: none;
  border: 2px solid #6c5ce7;
}

Pada contoh di atas, a.btn:hover adalah pseudo-class yang mengubah warna tombol ketika kursor diarahkan ke atasnya, sedangkan input:focus mengubah tampilan border ketika kolom input sedang aktif.

Apa Itu Pseudo_element?

Pseudo-element adalah “elemen semu” yang biasanya diawali dengan dua titik dua, seperti ::before, ::after, ::first-line, atau ::first-letter. Pseudo-element digunakan untuk menarget atau menambahkan bagian tertentu di dalam elemen tanpa menambah tag HTML baru.

Contoh pseudo-element yang sering dipakai:

1. ::before menambahkan konten sebelum isi elemen.
2. ::after menambahkan konten setelah isi elemen.
3. ::first-line memberi gaya khusus untuk baris pertama teks.
4. ::first-letter memberi gaya khusus untuk huruf pertama.

Contoh penggunaan pseudo-element:

<p class="teks">Belajar CSS di kodelyly.com itu seru dan menyenangkan.</p>

p.teks::first-line {
  font-weight: bold;
  font-size: 18px;
}

p.teks::before {
  content: "Tip: ";
  color: #e84393;
  font-weight: bold;
}

p.teks::after {
  content: " ✔";
}

Di sini, p.teks::first-line hanya memengaruhi baris pertama paragraf, sedangkan p.teks::before dan p.teks::after menambahkan teks “Tip: ” di awal dan tanda centang di akhir paragraf tanpa tambahan elemen HTML baru.

Contoh Gabungan Pseudo_class Dan Pseudo_element

Kalian juga bisa menggabungkan pseudo-class & pseudo-element untuk membuat efek yang lebih menarik. Misalnya, menambahkan ikon dekoratif hanya ketika elemen di-hover.

<button class="btn-main">Hover tombol ini</button>

button.btn-main {
  padding: 10px 24px;
  border-radius: 8px;
  border: none;
  background-color: #222;
  color: #fff;
  cursor: pointer;
}

button.btn-main:hover::after {
  content: " ✨";
}

Pada contoh ini, pseudo-class :hover digabung dengan pseudo-element ::after. Tanda ✨ hanya muncul setelah teks tombol ketika tombol tersebut di-hover.

Kapan Menggunakan Pseudo_class Vs Pseudo_element?

Kalian dapat mengingat perbedaannya dengan cara berikut. Jika ingin mengubah gaya berdasarkan keadaan elemen (misalnya di-hover, difokus, atau menjadi elemen pertama), gunakan pseudo-class. Namun jika ingin membuat atau menarget bagian tertentu di dalam elemen (seperti baris pertama, huruf pertama, atau konten tambahan sebelum dan sesudah), gunakan pseudo-element.

Dengan memahami perbedaan ini, kode CSS kalian akan lebih bersih karena tidak perlu menambah terlalu banyak class di HTML hanya untuk keperluan styling kecil.

Kesimpulan

Pseudo-class & Pseudo-element di CSS adalah fitur kuat yang membantu kalian mengatur gaya berdasarkan keadaan elemen dan bagian spesifik di dalam elemen tanpa mengubah struktur HTML. Pseudo-class bekerja pada kondisi elemen, sedangkan pseudo-element bekerja pada bagian atau konten semu di dalam elemen. Jika kalian menguasai keduanya, desain web akan menjadi lebih interaktif, rapi, dan efisien.

Sekian artikel dari kodelyly.com tentang Pseudo-class & Pseudo-element. Semoga bermanfaat dan membantu kalian menulis CSS yang lebih rapi dan profesional. Jangan lupa terus berlatih dan bereksperimen dengan contoh kode sendiri di proyek kalian.