Pseudo-class dan Pseudo-element Selektor Canggih tanpa JavaScript
Kendalikan tampilan elemen berdasarkan kondisi dan posisi — tanpa satu baris JavaScript pun. Ini adalah senjata rahasia CSS yang jarang dibahas tuntas untuk pemula.
⏱️
Estimasi Baca
8–10 Menit
🎯
Level
Pemula–Menengah
📅
Tahun
2026
Pernahkah kamu heran — tombol yang berubah warna saat di-hover, link yang tampak berbeda setelah diklik, atau baris tabel yang bergantian warna tanpa satu pun class tambahan — itu semua bukan sihir JavaScript, itu CSS pseudo-class dan pseudo-element! Di artikel ke-9 dari Seri Belajar CSS ini, kita akan bedah tuntas selektor-selektor canggih ini: apa itu CSS pseudo-class, apa bedanya dengan pseudo-element, dan bagaimana cara pakainya biar webmu langsung naik level. Kalau kamu baru belajar CSS dan sudah punya dasar HTML, artikel ini persis untuk kamu.
🧠 Apa Itu CSS Pseudo-class dan Pseudo-element Selektor?
Bayangkan kamu punya seragam sekolah. Di hari biasa kamu pakai seragam putih abu-abu. Tapi saat upacara, kamu pakai seragam pramuka. Baju yang sama, orang yang sama — tapi kondisinya berbeda, jadi tampilannya beda.
Begitu juga cara kerja pseudo-class di CSS. Pseudo-class adalah selektor yang menargetkan elemen berdasarkan kondisi atau state tertentu — misalnya saat kursor mendekat (:hover), saat elemen diklik (:active), atau saat link sudah pernah dikunjungi (:visited).
Sedangkan pseudo-element berbeda lagi. Kalau pseudo-class mengincar kondisi, pseudo-element mengincar bagian tertentu dari elemen — misalnya huruf pertama sebuah paragraf (::first-letter), atau konten yang bisa kamu sisipkan sebelum/setelah elemen (::before dan ::after).
📐 Formula Utama
Pseudo-class = Selektor + Kondisi Pseudo-element = Selektor + Bagian Elemen
Pseudo-class ditulis dengan satu titik dua: selector:pseudo-class Pseudo-element ditulis dengan dua titik dua: selector::pseudo-element
🔥
Fakta Menarik
CSS memiliki lebih dari 50 pseudo-class yang berbeda! Dari yang umum seperti :hover sampai yang jarang didengar seperti :is() dan :where(). Tapi tenang — kamu cukup kuasai 10 yang paling sering dipakai dulu.
🎮 CSS Pseudo-class Selektor — Merespons Kondisi dan State
Pseudo-class adalah fitur yang membuat CSS terasa "hidup". Tanpa pseudo-class, semua elemen akan selalu terlihat sama, statik, dan membosankan. Mari kita kenali yang paling penting.
Pseudo-class
Kondisi yang Ditargetkan
Contoh Penggunaan
:hover
Kursor di atas elemen
Tombol berubah warna saat dihover
:focus
Elemen sedang aktif/fokus
Input form yang sedang diketik
:visited
Link sudah pernah dikunjungi
Link berwarna ungu setelah diklik
:nth-child(n)
Elemen ke-n dalam parent-nya
Baris tabel bergantian warna
:first-child
Elemen pertama dari parent
Item pertama di list punya style beda
:last-child
Elemen terakhir dari parent
Hapus border di item terakhir list
:not(selector)
Semua elemen KECUALI yang dipilih
Style semua tombol kecuali tombol merah
🚀 Praktik Langkah Demi Langkah: Tombol Interaktif
1
Buat HTML dasar untuk tombol
Siapkan sebuah elemen <button> di HTML kamu. Tidak perlu class khusus — pseudo-class akan bekerja langsung.
2
Tambahkan style dasar tombol
Beri warna background, padding, dan border-radius. Ini adalah tampilan default tombolmu.
3
Gunakan :hover untuk efek mouse-over
Tulis button:hover lalu atur warna atau shadow yang berbeda. CSS akan otomatis menerapkannya saat kursor mendekat!
4
Tambahkan :active untuk saat tombol ditekan
Beri efek "tertekan" dengan sedikit mengecilkan ukuran atau menggeser posisi. Feedback visual ini meningkatkan UX secara drastis!
Selalu pasangkan pseudo-class :hover dengan properti transition di selector utamanya. Tanpa transition, perubahan akan terasa kasar dan tiba-tiba. Dengan transition: all 0.3s ease, semua perubahan jadi mulus seperti animasi profesional!
✍️ CSS Pseudo-element Selektor — Menargetkan Bagian dari Elemen
Kalau pseudo-class itu soal kapan, maka pseudo-element itu soal bagian mana. Bayangkan kamu membaca koran jadul — huruf pertama di artikel utama selalu dicetak besar dan tebal (disebut drop cap). Itu adalah contoh sempurna dari pseudo-element ::first-letter.
Yang paling sering digunakan dan paling powerful adalah ::before dan ::after. Dua ini adalah "saudara kembar" yang bisa menyisipkan konten virtual — dekorasi, ikon, atau elemen tambahan — tanpa mengubah satu karakter pun di HTML kamu.
/* Drop cap — huruf pertama besar seperti di koran */p::first-letter {
font-size: 3em;
font-weight: bold;
color: #6366f1;
float: left;
margin-right: 6px;
line-height: 0.85;
}
/* Sisipkan ikon ✅ sebelum item checklist */.checklist li::before {
content: "✅ ";
font-size: 1em;
}
/* Tooltip murni CSS tanpa JavaScript */[data-tooltip]::after {
content: attr(data-tooltip); /* ambil dari atribut HTML */position: absolute;
background: #1e1b4b;
color: white;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
white-space: nowrap;
top: -36px;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
}
[data-tooltip]:hover::after {
opacity: 1; /* Tooltip muncul saat hover — tanpa JS! */
}
⚡
Insight Penting
Pseudo-element ::before dan ::after membutuhkan properti content agar bisa muncul. Bahkan kalau kamu tidak ingin menambahkan teks apapun, kamu tetap harus menulis content: "". Tanpa ini, elemen tidak akan muncul sama sekali!
⚖️ Bedanya Pseudo-class vs Pseudo-element — Panduan Cepat Selektor CSS
Masih bingung kapan pakai yang mana? Jangan khawatir — ini adalah pertanyaan yang sering muncul dari orang yang baru belajar. Berikut adalah panduan analisis perbandingan yang akan membuatmu tidak pernah tertukar lagi.
🔵 Pseudo-class (:)
Merespons Kondisi/State
Ditulis dengan satu titik dua (:)
Contoh: :hover, :focus, :nth-child
Target: kondisi elemen (hover, klik, dll)
Tidak membuat konten baru
Bekerja pada elemen yang sudah ada di DOM
Bisa dikombinasikan: li:first-child:hover
🟡 Pseudo-element (::)
Menargetkan Bagian Elemen
Ditulis dengan dua titik dua (::)
Contoh: ::before, ::after, ::first-letter
Target: bagian spesifik dari elemen
Bisa membuat konten virtual (::before/::after)
Butuh properti content untuk ::before/::after
Tidak bisa dikombinasikan dua pseudo-element
⚠️
Perhatian
CSS lama (CSS2) menggunakan satu titik dua untuk pseudo-element, misalnya :before dan :after. Ini masih bekerja di browser modern, tapi standar CSS3 yang benar menggunakan dua titik dua (::). Biasakan pakai ::before dan ::after dari sekarang agar kode kamu lebih future-proof.
🌐 Contoh Nyata: Manfaat Pseudo-class dan Pseudo-element di Website Sungguhan
Mari kita lihat bagaimana selektor CSS pseudo-class dan pseudo-element digunakan di dunia nyata — bukan sekadar contoh teori. Kombinasi keduanya adalah kunci tampilan web yang profesional dan interaktif.
style.css — Kombinasi canggih, tanpa JavaScript
/* ===== NAVIGASI: semua link kecuali yang aktif ===== */nav a:not(.aktif):hover {
color: #6366f1;
text-decoration: underline;
}
/* ===== FORM: input saat fokus ===== */input:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}
/* ===== CARD: dekorasi sudut dengan ::before ===== */.card {
position: relative; /* wajib untuk ::before absolute */
}
.card::before {
content: ""; /* wajib ada! */position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(#6366f1, #f59e0b);
border-radius: 4px 0 0 4px;
}
/* ===== LIST: hapus border di item terakhir ===== */.list-item:not(:last-child) {
border-bottom: 1px solid #e2e8f0;
}
/* ===== HIGHLIGHT teks yang dipilih user ===== */::selection {
background: #6366f1;
color: white;
}
⚡
Insight Penting
Pseudo-element ::selection memungkinkan kamu kustomisasi warna teks yang dipilih user di halamanmu. Ini sentuhan kecil yang bikin pengunjung terkesan karena terasa "branded". Cukup dua properti: background dan color!
🏁
Kesimpulan: CSS Pseudo-class dan Pseudo-element adalah Senjatamu
Di artikel ini kamu sudah belajar bahwa CSS pseudo-class dan pseudo-element selektor adalah cara paling efisien untuk menciptakan tampilan web yang hidup dan interaktif — tanpa satu baris JavaScript pun.
Ringkasannya: Pseudo-class (:) merespons kondisi dan state elemen seperti hover, fokus, atau posisi dalam parent. Pseudo-element (::) menargetkan bagian spesifik dari elemen atau menyisipkan konten virtual dengan ::before dan ::after.
Kuncinya: selalu pasangkan transition dengan pseudo-class untuk animasi mulus, dan jangan lupa content saat pakai pseudo-element. Sekarang giliran kamu mencoba di projectmu sendiri!
💬 Punya pertanyaan atau mau share hasil eksperimenmu? Tulis di kolom komentar!
saifiahmada.com adalah blog belajar programming Indonesia, membahas lengkap materi bahasa pemrograman: code HTML, CSS, Bootstrap, Desain, PHP, MySQL, coding Java, Query, SQL, dan dunia linux
No comments:
Post a Comment