Pseudo-element yang Wajib Diketahui

#webdev #css #indonesia

Pseudo-element yang Wajib Diketahui

Pseudo-element secara bahasa artinya Element Semu, alias element yang samar atau tersembunyi. Pada beberapa elemen HTML ada yang membawa elemen semu seperti elemen input yang membawa elemen semu placeholder. Kalau kita memberikan styel color ke input, maka style tersebut akan diterapkan ke hasil inputan kita dan bukan ke placeholder. Disini lah peran pseudo-element sebagai selector ke placeholder. Pseudo-element ciri khasnya diawali dengan titik dua dua di depan. Jadi untuk placeholder selectornya menjadi ::placeholder. Contoh:

input::placeholder {
  color: silver;
}

"Bagaimana cara mengetahui ada Pseudo-element apa saja?"
Bisa cek ke dokumentasi Pseudo-element | MDN

Daftar Pseudo-element

Pseudo-element	Keterangan	Prioritas
::after	Menyisipkan konten setelah isi elemen	⭐⭐⭐⭐⭐
::backdrop	backdrop pada elemen <dialog>	⭐⭐⭐
::before	Menyisipkan konten sebelum isi elemen	⭐⭐⭐⭐⭐
::cue	Untuk styling cue (teks subtitle) pada video (WebVTT)	⭐⭐
::details-content	Styling konten pada elemen <details>.	⭐⭐⭐
::file-selector-button	Styling tombol pada <input type="file">	⭐⭐⭐⭐
::first-letter	Menargetkan huruf pertama dalam paragraf	⭐⭐⭐
::first-line	Menargetkan baris pertama dalam teks	⭐⭐⭐
::Marker	Menentukan gaya bullet atau numbering pada list	⭐⭐⭐⭐
::selection	Menentukan gaya teks yang diseleksi user	⭐⭐⭐⭐⭐
::target-text	Menyorot teks target fragment URL	⭐⭐⭐
::view-transition and friends	Memberikan animasi transisi halaman	⭐⭐⭐⭐