Panduan Referensi Pseudo-Element CSS
- Halaman sebelumnya Pseudo-kelas CSS
- Halaman berikutnya Fungsi CSS
Element pseudo CSS
Element pseudo CSS digunakan untuk menata gaya bagian khusus dari elemen.
Contoh, ini dapat digunakan untuk:
- Atur gaya huruf pertama atau baris pertama elemen.
- Sisipkan konten sebelum atau setelah konten elemen.
- Atur gaya tampilan tanda pilihan dalam daftar.
- Atur gaya tampilan latar belakang dialog.
Tabel di bawah menunjukkan elemen pseudo yang berbeda dalam CSS:
Element pseudo | Contoh | Deskripsi contoh |
---|---|---|
::after | p::after | Sisipkan konten setelah konten elemen yang ditentukan. |
::backdrop | dialog::backdrop | Atur gaya tampilan latar belakang untuk elemen dialog atau elemen pop-up. |
::before | p::before | Sisipkan konten sebelum konten elemen yang ditentukan. |
::file-selector-button | ::file-selector-button | Pilih tombol untuk tombol <input type="file">. |
::first-letter | p::first-letter | Pilih huruf pertama untuk setiap elemen <p>. |
::first-line | p::first-line | Pilih baris pertama untuk setiap elemen <p>. |
::grammar-error | ::grammar-error | Atur gaya teks yang ditandai sebagai kesalahan sintaks pengguna peramban. |
::highlight() | ::highlight(custom-name) | Pilih penyorotan yang disesuaikan. |
::marker | ::marker | Tandai pilihan dalam daftar. |
::placeholder | input::placeholder | Atur gaya teks teks placeholder untuk elemen <input> atau <textarea>. |
::selection | ::selection | Atur gaya teks yang dipilih pengguna. |
::spelling-error | ::spelling-error | Atur gaya teks yang ditandai sebagai kesalahan ejaan pengguna peramban. |
::view-transition | ::view-transition | Menunjukkan akar overlay transisi tampilan, yang mencakup semua transisi tampilan di halaman. |
::view-transition-group | ::view-transition-group | Menunjukkan grup gambar snapshot transit untuk tampilan tunggal. |
::view-transition-image-pair | ::view-transition-image-pair | Wadah kontainer status view lama dan baru yang digunakan untuk transisi tampilan (sebelum dan setelah transisi). |
::view-transition-new | ::view-transition-new | Menunjukkan status 'baru' yang digunakan untuk transisi tampilan. |
::view-transition-old | ::view-transition-old | Menunjukkan status 'lama' yang digunakan untuk transisi tampilan. |
- Halaman sebelumnya Pseudo-kelas CSS
- Halaman berikutnya Fungsi CSS