Pseudo-class & Pseudo-element
Menata keadaan elemen (:hover, :focus, :first-child, :nth-child) dan bagian elemen (::before, ::after, ::first-line), serta menandai urutan elemen.
Pseudo-class: elemen dalam keadaan tertentu
Pseudo-class (diawali satu titik dua :) memilih elemen berdasarkan keadaan atau posisinya, tanpa perlu menambah class di HTML.
Keadaan interaksi
| Pseudo-class | Aktif saat… |
|---|---|
:hover | Kursor berada di atas elemen |
:focus | Elemen sedang difokus (input diklik / ditekan Tab) |
:active | Elemen sedang ditekan |
:disabled, :checked, :required | Input dalam keadaan tersebut |
:visited | Tautan sudah pernah dikunjungi |
a:hover { color: tomato; }
input:focus { outline: 2px solid blue; }
button:active { transform: scale(0.97); }Selalu sediakan gaya :focus yang jelas. Pengguna keyboard mengandalkannya untuk tahu posisi mereka. Jangan hapus outline tanpa penggantinya.
Posisi dalam keluarga
| Pseudo-class | Memilih |
|---|---|
:first-child | Anak pertama dari induknya |
:last-child | Anak terakhir |
:nth-child(2) | Anak ke-2 |
:nth-child(odd) / (even) | Anak ganjil / genap (cocok untuk baris tabel selang-seling) |
:nth-child(3n) | Kelipatan 3 |
:not(.x) | Semua yang BUKAN class x |
li:first-child { font-weight: bold; }
tr:nth-child(even) { background: #f2f2f2; }
li:not(:last-child) { margin-bottom: 8px; }Pseudo-element: bagian dari elemen
Pseudo-element (dua titik dua ::) menata bagian elemen atau menambah konten tiruan.
| Pseudo-element | Fungsi |
|---|---|
::before / ::after | Menyisipkan konten sebelum / sesudah isi elemen |
::first-line | Baris pertama teks |
::first-letter | Huruf pertama (efek drop cap) |
::placeholder | Teks placeholder input |
::selection | Teks yang sedang diblok |
.catatan::before {
content: "💡 ";
}
a[target="_blank"]::after {
content: " ↗";
}::before dan ::after wajib punya properti content (boleh kosong: content: ""), kalau tidak, tidak tampil.