CSS 06B: Pseudo-Class dan Pseudo-Element

Pseudo-class memilih elemen berdasarkan keadaan, sedangkan pseudo-element memilih atau membuat bagian virtual dari elemen.

1. Demo Interaksi dan Dekorasi

:hover, :focus-visible, :checked, dan :first-child adalah pseudo-class. ::before dan ::after adalah pseudo-element. Properti content wajib tersedia untuk keduanya, walaupun nilainya berupa teks kosong.

Jangan menghapus outline tanpa menyediakan pengganti yang terlihat. Informasi penting juga sebaiknya tetap ditulis di HTML, bukan hanya melalui content.

Kesalahan yang Sering Terjadi

• Menulis button hover tanpa tanda titik dua.
• Hanya menyediakan efek :hover dan melupakan :focus-visible.
• Menaruh kalimat penting melalui content.
• Membuat selector terlalu panjang sehingga sulit dirawat.

Latihan

Arahkan mouse ke tombol, lalu gunakan tombol Tab untuk memfokuskannya. Ubah jarak gerak panah dan tambahkan gaya untuk button:disabled.

Ringkasan

Pseudo-class memilih keadaan elemen, misalnya :hover dan :checked. Pseudo-element membuat bagian virtual, misalnya ::before dan ::after.