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 | ⭐⭐⭐⭐ |
Disclaimer: Penilaian kolom prioritas datangnya murni dari opini saya sendiri. Jadi jika kamu tidak setuju, silakan sesuaikan.
Sekian tulisan saya kali ini, sampai jumpa di tulisan selanjutnya 👋
Top comments (0)