CSS Pseudo-class

CSS Pseudo-class adalah kata kunci yang ditambahkan ke selector untuk menentukan keadaan khusus dari elemen yang dipilih. Misalnya, pseudo-class dapat digunakan untuk:

• Memberikan style sebuah elemen saat pengguna mengarahkan mouse ke atas elemen
• Memberikan style link yang sudah dikunjungi dan belum dikunjungi secara berbeda
• Memberikan style elemen saat mendapatkan fokus

Sintaks CSS Pseudo-class

Sintaks dari pseudo-class adalah sebagai berikut:

Jenis-jenis CSS Pseudo-class

Ada banyak jenis pseudo-class dalam CSS, tetapi di sini kita akan membahas beberapa yang paling umum digunakan.

Anchor Pseudo-class

Anchor pseudo-class digunakan untuk memberikan style link yang berbeda berdasarkan keadaannya. Ada empat jenis anchor pseudo-class:

• :link - memilih link yang belum dikunjungi
• :visited - memilih link yang sudah dikunjungi
• :hover - memilih link saat mouse berada di atasnya
• :active - memilih link saat sedang diklik

Contoh berikut memberikan warna berbeda untuk setiap keadaan link:

Catatan: a:hover harus ditempatkan setelah a:link dan a:visited agar efektif! a:active harus ditempatkan setelah a:hover agar efektif! Nama pseudo-class tidak case-sensitive.

Pseudo-class dan HTML Class

Pseudo-class dapat digabungkan dengan HTML class untuk membuat seleksi lebih spesifik. Contoh berikut memberikan style pada elemen <a> yang memiliki class=“highlight” saat mouse berada di atasnya:

:focus Pseudo-class

:focus pseudo-class digunakan untuk memilih elemen yang mendapatkan fokus dari pengguna. Misalnya, saat pengguna mengklik atau mengetik pada elemen input. Contoh berikut memberikan border biru pada elemen input saat mendapatkan fokus:

:first-child Pseudo-class

:first-child pseudo-class digunakan untuk memilih elemen yang merupakan anak pertama dari elemen lain. Contoh berikut memberikan warna biru pada elemen <p> yang merupakan anak pertama dari elemen apapun:

:lang Pseudo-class

:lang pseudo-class digunakan untuk memberikan style khusus pada elemen yang memiliki atribut lang tertentu. Contoh berikut memberikan tanda kutip khusus pada elemen <q> yang memiliki lang=“id”:

Kegunaan CSS Pseudo-class

CSS Pseudo-class dapat digunakan untuk membuat style lebih dinamis dan interaktif sesuai dengan keadaan elemen. Dengan menggunakan pseudo-class, kita dapat menargetkan elemen tidak hanya berdasarkan kontennya, tetapi juga berdasarkan faktor eksternal seperti riwayat browser, status kontennya, atau posisi mouse.

Beberapa contoh kegunaan CSS Pseudo-class adalah sebagai berikut:

• Untuk membuat tooltip sederhana dengan menggunakan :hover dan display:none.
• Untuk membuat validasi form dengan menggunakan :valid dan :invalid.
• Untuk membuat menu dropdown dengan menggunakan :hover dan visibility:hidden.
• Untuk membuat animasi sederhana dengan menggunakan :hover dan transition.

Kesimpulan

CSS Pseudo-class adalah kata kunci yang ditambahkan ke selector untuk menentukan keadaan khusus dari elemen yang dipilih. Ada banyak jenis pseudo-class dalam CSS, tetapi beberapa yang paling umum digunakan adalah anchor pseudo-class, :focus, :first-child, dan :lang. Dengan menggunakan pseudo-class, kita dapat membuat style lebih dinamis dan interaktif sesuai dengan keadaan elemen.

• Belajar CSS Pseudo-class dengan Contoh Praktis

• Mengenal CSS Pseudo-class dan Cara Menggunakannya