Pseudo-Classes CSS: Styling Berdasarkan State dan Posisi

Apa Itu Pseudo-Class dalam CSS?

Pseudo-class adalah kata kunci khusus dalam CSS yang ditambahkan setelah selector untuk menargetkan elemen berdasarkan state tertentu atau posisi dalam struktur dokumen, bukan hanya tampilan statisnya.

Contoh penggunaan:

• Menyoroti link saat di-hover.
• Mengubah gaya input saat mendapat fokus.
• Menyembunyikan/menampilkan elemen berdasarkan interaksi pengguna.

Dengan pseudo-class, kita bisa membuat antarmuka web lebih interaktif, dinamis, dan responsif tanpa harus menggunakan JavaScript.

---

1. Struktur Dasar Pseudo-Class

Sintaks dasar:

selector:pseudo-class {
    property: value;
}

Contoh:

a:hover {
    color: red;
}

---

2. Pseudo-Class Interaksi Pengguna

Berikut beberapa pseudo-class yang sering digunakan untuk respons visual saat pengguna berinteraksi:

Pseudo-Class	Deskripsi
:hover	Saat pengguna mengarahkan mouse ke elemen
:active	Saat elemen sedang diklik atau aktif
:focus	Saat elemen mendapat fokus (misalnya form input)
:visited	Untuk link yang sudah dikunjungi
:link	Untuk link yang belum dikunjungi

Contoh:

button:hover {
    background-color: #f0f0f0;
}

input:focus {
    border-color: blue;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 255, 0.2);
}

💡 Gunakan kombinasi :hover, :focus, dan :active untuk meningkatkan aksesibilitas dan pengalaman pengguna.

---

3. Pseudo-Class Form

Beberapa pseudo-class khusus untuk elemen form:

Pseudo-Class	Deskripsi
:required	Elemen form wajib diisi
:optional	Elemen form tidak wajib diisi
:valid	Input sesuai dengan aturan validasi
:invalid	Input tidak sesuai dengan aturan validasi
:enabled / :disabled	Elemen dapat/tidak dapat diedit

Contoh:

input:required {
    border-left: 4px solid orange;
}

input:invalid {
    border-color: red;
}

---

4. Pseudo-Class untuk Elemen Anak

Beberapa pseudo-class berguna untuk menargetkan elemen berdasarkan posisi atau urutan dalam struktur HTML:

Pseudo-Class	Deskripsi
:first-child	Elemen pertama dalam induknya
:last-child	Elemen terakhir dalam induknya
:nth-child(n)	Elemen ke-n dalam induknya
:only-child	Hanya satu anak dalam induknya
:empty	Elemen yang tidak memiliki konten atau anak
:not(selector)	Tidak cocok dengan selector tertentu

Contoh:

li:nth-child(odd) {
    background-color: #f9f9f9;
}

p:not(.intro) {
    font-weight: normal;
}

---

5. Pseudo-Class Link

Link memiliki beberapa state yang bisa distil secara terpisah:

/* Belum dikunjungi */
a:link {
    color: blue;
}

/* Sudah dikunjungi */
a:visited {
    color: purple;
}

/* Saat di-hover */
a:hover {
    text-decoration: underline;
}

/* Saat diklik */
a:active {
    color: red;
}

⚠️ Urutan penulisan penting agar styling tidak bertentangan — gunakan urutan LVHA: link – visited – hover – active.

---

6. Contoh Praktis

a. Tombol Responsif dengan Hover & Fokus

HTML

<button class="btn">Klik Saya</button>

CSS

.btn {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: #0056b3;
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

b. Daftar Ganjil-Genap dengan Warna Berbeda

HTML

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

CSS

li:nth-child(odd) {
    background-color: #f0f0f0;
}

li:nth-child(even) {
    background-color: #e0e0e0;
}

---

Tips dan Trik Efektif

• Gunakan :hover untuk efek visual pada tombol, card, atau navigasi.
• Selalu tambahkan :focus untuk meningkatkan aksesibilitas keyboard.
• Gunakan :nth-child() untuk styling daftar atau tabel secara dinamis.
• Kombinasikan :not() untuk styling selektif.
• Uji semua pseudo-class di browser untuk memastikan bekerja sesuai harapan.

---

Kesimpulan

Pseudo-class adalah fitur yang sangat kuat dalam CSS untuk menargetkan elemen berdasarkan state atau posisi tertentu. Dengan memahami dan menggunakan pseudo-class seperti :hover, :focus, :nth-child(), dan lainnya, Anda bisa menciptakan antarmuka web yang lebih interaktif, dinamis, dan responsif.

Selanjutnya, kita akan membahas Pseudo-Elements CSS, yaitu cara membuat elemen tambahan dengan CSS untuk efek visual yang lebih kreatif.

---

💡 Tips Praktis

• Gunakan :hover dan :focus bersama untuk pengalaman pengguna yang lebih baik.
• Gunakan :nth-child() untuk styling otomatis pada daftar dan tabel.
• Gunakan :not() untuk menghindari styling pada elemen tertentu.
• Pastikan elemen tetap mudah diakses oleh pengguna keyboard.