CSS Pseudo-classes Cheat Sheet: Panduan Lengkap untuk Developer
Pseudo-classes CSS adalah kunci untuk menambahkan gaya dinamis dan interaktif ke elemen HTML Anda. Mereka memungkinkan Anda menargetkan elemen berdasarkan statusnya (misalnya, saat dihover, diklik, atau difokuskan) dan memodifikasi penampilannya sesuai dengan itu. Cheat sheet ini akan menjadi panduan lengkap Anda untuk memahami dan menggunakan berbagai pseudo-classes CSS.
Daftar Isi
- Apa Itu Pseudo-classes CSS?
- Struktur dan Sintaks Pseudo-classes
- Pseudo-classes Umum dan Paling Sering Digunakan
- :hover
- :active
- :focus
- :visited
- :link
- :first-child
- :last-child
- :nth-child
- :nth-of-type
- :first-of-type
- :last-of-type
- :only-child
- :only-of-type
- :empty
- :disabled
- :enabled
- :checked
- :required
- :optional
- :valid
- :invalid
- :in-range
- :out-of-range
- :read-only
- :read-write
- :default
- :indeterminate
- :placeholder-shown
- Pseudo-classes Struktur Pohon (Tree-Structural Pseudo-classes)
- Pseudo-classes UI (User Interface Pseudo-classes)
- :target Pseudo-class
- Contoh Penggunaan Pseudo-classes dalam Proyek Nyata
- Praktik Terbaik dalam Menggunakan Pseudo-classes
- Kesimpulan
Apa Itu Pseudo-classes CSS?
Pseudo-classes adalah kata kunci yang ditambahkan ke selector untuk menentukan keadaan khusus dari elemen. Misalnya, Anda bisa menggunakan pseudo-class :hover untuk mengubah warna tombol saat kursor mouse berada di atasnya. Mereka memungkinkan Anda menerapkan gaya ke elemen berdasarkan faktor-faktor selain posisinya dalam struktur dokumen.
Perbedaan utama antara pseudo-classes dan classes biasa adalah bahwa classes biasa ditetapkan secara eksplisit dalam HTML, sedangkan pseudo-classes diterapkan secara dinamis oleh browser berdasarkan interaksi pengguna atau status elemen.
Struktur dan Sintaks Pseudo-classes
Sintaks dasar untuk menggunakan pseudo-classes adalah:
selector:pseudo-class { property: value; }
- selector: Elemen HTML yang ingin Anda targetkan.
- :pseudo-class: Pseudo-class yang ingin Anda gunakan (misalnya,
:hover,:focus). - { property: value; }: Gaya CSS yang akan diterapkan ketika keadaan pseudo-class terpenuhi.
Contoh:
a:hover { color: red; }
Ini akan mengubah warna teks dari semua elemen <a> menjadi merah ketika mouse berada di atasnya.
Pseudo-classes Umum dan Paling Sering Digunakan
:hover
Pseudo-class :hover digunakan untuk menerapkan gaya ketika kursor mouse berada di atas elemen. Ini sangat umum digunakan untuk tombol, tautan, dan elemen interaktif lainnya.
Contoh:
button:hover { background-color: #ddd; color: black; }
Kode ini akan mengubah warna latar belakang tombol menjadi abu-abu muda dan warna teks menjadi hitam saat mouse berada di atasnya.
:active
Pseudo-class :active digunakan untuk menerapkan gaya saat elemen sedang diaktifkan, misalnya saat tombol sedang ditekan atau tautan sedang diklik.
Contoh:
button:active { background-color: #bbb; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
Kode ini akan mengubah warna latar belakang tombol menjadi abu-abu lebih gelap dan menambahkan bayangan saat tombol sedang ditekan.
:focus
Pseudo-class :focus digunakan untuk menerapkan gaya saat elemen difokuskan, biasanya melalui tab navigation atau dengan mengklik elemen input.
Contoh:
input:focus { border: 2px solid blue; outline: none; }
Kode ini akan menambahkan border biru tebal ke elemen input yang sedang difokuskan dan menghapus outline default browser.
:visited
Pseudo-class :visited digunakan untuk menerapkan gaya ke tautan yang telah dikunjungi oleh pengguna. Perhatikan bahwa terdapat batasan keamanan yang signifikan terkait dengan pseudo-class ini, sehingga penggunaannya terbatas.
Contoh:
a:visited { color: purple; }
Kode ini akan mengubah warna tautan yang telah dikunjungi menjadi ungu.
:link
Pseudo-class :link digunakan untuk menerapkan gaya ke tautan yang belum dikunjungi oleh pengguna.
Contoh:
a:link { color: blue; }
Kode ini akan mengubah warna tautan yang belum dikunjungi menjadi biru.
:first-child
Pseudo-class :first-child digunakan untuk menargetkan elemen yang merupakan anak pertama dari elemen induknya.
Contoh:
li:first-child { font-weight: bold; }
Kode ini akan membuat teks pada item daftar pertama menjadi tebal.
:last-child
Pseudo-class :last-child digunakan untuk menargetkan elemen yang merupakan anak terakhir dari elemen induknya.
Contoh:
li:last-child { border-bottom: none; }
Kode ini akan menghapus border bawah dari item daftar terakhir.
:nth-child
Pseudo-class :nth-child(n) digunakan untuk menargetkan elemen yang merupakan anak ke-n dari elemen induknya. ‘n’ bisa berupa angka, kata kunci (even, odd), atau rumus.
Contoh:
li:nth-child(2) { color: green; }
Kode ini akan mengubah warna teks pada item daftar kedua menjadi hijau.
:nth-of-type
Pseudo-class :nth-of-type(n) mirip dengan :nth-child(n), tetapi hanya mempertimbangkan elemen dengan jenis yang sama.
Contoh:
p:nth-of-type(2) { font-style: italic; }
Kode ini akan membuat teks pada paragraf kedua dalam sebuah elemen induk menjadi miring.
:first-of-type
Pseudo-class :first-of-type digunakan untuk menargetkan elemen pertama dari jenis tertentu dalam elemen induk.
Contoh:
p:first-of-type { font-size: 1.2em; }
Kode ini akan memperbesar ukuran font paragraf pertama dalam elemen induk.
:last-of-type
Pseudo-class :last-of-type digunakan untuk menargetkan elemen terakhir dari jenis tertentu dalam elemen induk.
Contoh:
p:last-of-type { margin-bottom: 0; }
Kode ini akan menghapus margin bawah paragraf terakhir dalam elemen induk.
:only-child
Pseudo-class :only-child digunakan untuk menargetkan elemen yang merupakan satu-satunya anak dari elemen induknya.
Contoh:
p:only-child { text-align: center; }
Kode ini akan memusatkan teks paragraf jika paragraf tersebut adalah satu-satunya anak dari elemen induknya.
:only-of-type
Pseudo-class :only-of-type digunakan untuk menargetkan elemen yang merupakan satu-satunya elemen dari jenis tertentu dalam elemen induk.
Contoh:
p:only-of-type { color: red; }
Kode ini akan mengubah warna teks paragraf menjadi merah jika paragraf tersebut adalah satu-satunya paragraf dalam elemen induk.
:empty
Pseudo-class :empty digunakan untuk menargetkan elemen yang tidak memiliki anak (termasuk node teks).
Contoh:
div:empty { display: none; }
Kode ini akan menyembunyikan elemen <div> jika tidak memiliki konten apa pun.
:disabled
Pseudo-class :disabled digunakan untuk menargetkan elemen form yang dinonaktifkan (misalnya, <input>, <button>).
Contoh:
input:disabled { background-color: #ddd; color: #888; cursor: not-allowed; }
Kode ini akan mengubah warna latar belakang elemen input yang dinonaktifkan menjadi abu-abu muda, warna teks menjadi abu-abu, dan kursor menjadi “not-allowed”.
:enabled
Pseudo-class :enabled digunakan untuk menargetkan elemen form yang diaktifkan.
Contoh:
input:enabled { border: 1px solid #ccc; }
Kode ini akan memberikan border abu-abu pada elemen input yang diaktifkan.
:checked
Pseudo-class :checked digunakan untuk menargetkan elemen input yang dicentang (misalnya, <input type="checkbox"> atau <input type="radio">).
Contoh:
input[type="checkbox"]:checked + label { font-weight: bold; }
Kode ini akan membuat teks label yang terkait dengan kotak centang yang dicentang menjadi tebal.
:required
Pseudo-class :required digunakan untuk menargetkan elemen input yang diperlukan.
Contoh:
input:required { border-left: 5px solid red; }
Kode ini akan menambahkan border kiri berwarna merah pada elemen input yang wajib diisi.
:optional
Pseudo-class :optional digunakan untuk menargetkan elemen input yang tidak diperlukan.
Contoh:
input:optional { border-left: 5px solid green; }
Kode ini akan menambahkan border kiri berwarna hijau pada elemen input yang opsional.
:valid
Pseudo-class :valid digunakan untuk menargetkan elemen input yang isinya valid berdasarkan tipe input dan atribut yang ditentukan (misalnya, type="email", pattern).
Contoh:
input:valid { border-color: green; }
Kode ini akan mengubah warna border elemen input menjadi hijau jika isinya valid.
:invalid
Pseudo-class :invalid digunakan untuk menargetkan elemen input yang isinya tidak valid.
Contoh:
input:invalid { border-color: red; }
Kode ini akan mengubah warna border elemen input menjadi merah jika isinya tidak valid.
:in-range
Pseudo-class :in-range digunakan untuk menargetkan elemen input yang nilainya berada dalam rentang yang ditentukan (misalnya, <input type="number" min="0" max="100">).
Contoh:
input[type="number"]:in-range { border-color: green; }
Kode ini akan mengubah warna border elemen input bertipe number menjadi hijau jika nilainya berada dalam rentang yang ditentukan.
:out-of-range
Pseudo-class :out-of-range digunakan untuk menargetkan elemen input yang nilainya berada di luar rentang yang ditentukan.
Contoh:
input[type="number"]:out-of-range { border-color: red; }
Kode ini akan mengubah warna border elemen input bertipe number menjadi merah jika nilainya berada di luar rentang yang ditentukan.
:read-only
Pseudo-class :read-only digunakan untuk menargetkan elemen yang tidak dapat dimodifikasi oleh pengguna.
Contoh:
input:read-only { background-color: #eee; }
Kode ini akan mengubah warna latar belakang elemen input yang bersifat read-only menjadi abu-abu sangat muda.
:read-write
Pseudo-class :read-write digunakan untuk menargetkan elemen yang dapat dimodifikasi oleh pengguna.
Contoh:
input:read-write { border: 1px solid black; }
Kode ini akan memberikan border hitam pada elemen input yang dapat diubah.
:default
Pseudo-class :default digunakan untuk menargetkan elemen yang merupakan pilihan default dalam grup elemen (misalnya, tombol submit dalam form).
Contoh:
button:default { font-weight: bold; }
Kode ini akan membuat tombol default dalam form menjadi tebal.
:indeterminate
Pseudo-class :indeterminate digunakan untuk menargetkan elemen input yang berada dalam keadaan indeterminate (misalnya, kotak centang yang tidak dicentang maupun tidak kosong).
Contoh:
input[type="checkbox"]:indeterminate { border: 2px dotted blue; }
Kode ini akan menambahkan border biru putus-putus pada kotak centang yang berada dalam keadaan indeterminate.
:placeholder-shown
Pseudo-class :placeholder-shown digunakan untuk menargetkan elemen input yang menampilkan placeholder.
Contoh:
input:placeholder-shown { color: #999; }
Kode ini akan mengubah warna teks placeholder menjadi abu-abu gelap.
Pseudo-classes Struktur Pohon (Tree-Structural Pseudo-classes)
Pseudo-classes ini memungkinkan Anda memilih elemen berdasarkan posisinya dalam struktur dokumen (DOM).
:root
Pseudo-class :root mewakili elemen root dokumen. Dalam HTML, ini biasanya adalah elemen <html>. Ini sering digunakan untuk mendefinisikan variabel CSS global.
Contoh:
:root { --main-color: #007bff; }
Ini mendefinisikan variabel CSS bernama --main-color dengan nilai biru. Anda kemudian dapat menggunakannya di seluruh stylesheet Anda.
:nth-child() dengan Rumus
Anda dapat menggunakan rumus dalam :nth-child() untuk menargetkan elemen dengan pola yang lebih kompleks.
- an + b: ‘a’ adalah ukuran siklus, ‘n’ adalah counter (dimulai dari 0), dan ‘b’ adalah offset awal.
Contoh:
li:nth-child(2n+1) { background-color: #f2f2f2; }
Kode ini akan memberikan warna latar belakang abu-abu muda ke semua item daftar ganjil.
li:nth-child(even) { background-color: #f2f2f2; }
Kode ini akan memberikan warna latar belakang abu-abu muda ke semua item daftar genap.
:nth-last-child()
Pseudo-class :nth-last-child(n) mirip dengan :nth-child(n), tetapi menghitung dari elemen terakhir.
Contoh:
li:nth-last-child(2) { color: orange; }
Kode ini akan mengubah warna teks pada item daftar kedua dari terakhir menjadi oranye.
:nth-of-type() dengan Rumus
Sama seperti :nth-child(), Anda dapat menggunakan rumus dengan :nth-of-type().
Contoh:
p:nth-of-type(3n) { font-weight: bold; }
Kode ini akan membuat teks setiap paragraf ketiga menjadi tebal.
:nth-last-of-type()
Pseudo-class :nth-last-of-type(n) mirip dengan :nth-of-type(n), tetapi menghitung dari elemen terakhir dari jenis tertentu.
Contoh:
p:nth-last-of-type(1) { margin-bottom: 0; }
Kode ini akan menghapus margin bawah paragraf terakhir.
Pseudo-classes UI (User Interface Pseudo-classes)
Pseudo-classes UI berhubungan dengan keadaan antarmuka pengguna.
- Sudah dibahas di bagian “Pseudo-classes Umum dan Paling Sering Digunakan” (
:enabled,:disabled,:checked,:valid,:invalid,:in-range,:out-of-range,:read-only,:read-write,:default,:indeterminate,:placeholder-shown).
:target Pseudo-class
Pseudo-class :target digunakan untuk menargetkan elemen yang ID-nya cocok dengan fragmen URL saat ini.
Contoh:
HTML:
<h2 id="section1">Section 1</h2>
CSS:
:target { border: 2px solid red; }
Jika URL-nya adalah http://example.com/#section1, maka elemen <h2 id="section1"> akan memiliki border merah.
Contoh Penggunaan Pseudo-classes dalam Proyek Nyata
- Membuat Tombol Interaktif:
button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; } button:hover { background-color: #3e8e41; } button:active { background-color: #3e8e41; box-shadow: 0 2px #666; transform: translateY(2px); } - Menyoroti Item Daftar:
li:hover { background-color: #f0f0f0; } - Styling Form Input:
input[type="text"]:focus { border: 2px solid #555; } input[type="text"]:invalid { border: 2px solid red; } input[type="text"]:valid { border: 2px solid green; } - Membuat Tabel dengan Baris Bergaris:
tr:nth-child(even) { background-color: #f2f2f2; }
Praktik Terbaik dalam Menggunakan Pseudo-classes
- Konsistensi: Gunakan pseudo-classes secara konsisten di seluruh proyek Anda untuk memberikan pengalaman pengguna yang intuitif.
- Aksesibilitas: Pastikan bahwa interaksi pseudo-classes juga dapat diakses oleh pengguna dengan disabilitas. Misalnya, gunakan
:focusdengan gaya yang jelas untuk elemen interaktif yang dapat dinavigasi dengan keyboard. - Specificity: Perhatikan specificity CSS saat menggunakan pseudo-classes. Kadang-kadang, Anda mungkin perlu menggunakan specificity yang lebih tinggi untuk menimpa gaya default.
- Performance: Hindari menggunakan pseudo-classes yang memicu repaint dan reflow yang sering, karena dapat mempengaruhi performa situs web Anda.
- Test di berbagai browser: Uji kode Anda di berbagai browser untuk memastikan kompatibilitas. Meskipun sebagian besar pseudo-classes didukung secara luas, selalu ada perbedaan kecil antar browser.
Kesimpulan
Pseudo-classes CSS adalah alat yang ampuh untuk menambahkan interaktivitas dan gaya dinamis ke situs web Anda. Dengan memahami dan menggunakan berbagai pseudo-classes yang tersedia, Anda dapat menciptakan pengalaman pengguna yang lebih menarik dan intuitif. Cheat sheet ini menyediakan referensi lengkap untuk membantu Anda memulai. Teruslah bereksperimen dan mempraktikkan berbagai pseudo-classes untuk meningkatkan keterampilan CSS Anda.
“`
