Halo teman-teman semuanya, di materi sebelumnya, kita telah belajar tentang media query untuk membuat desain responsif. Sekarang, kita akan membahas dua fitur penting lainnya dalam CSS yang sering digunakan untuk memberi efek khusus pada elemen: pseudo-class dan pseudo-element.
Dengan fitur ini, kita bisa menargetkan kondisi tertentu atau bagian spesifik dari elemen, tanpa harus menambah tag HTML baru.
Apa Itu Pseudo-class?
Pseudo-class adalah selector khusus yang digunakan untuk menargetkan elemen dalam kondisi tertentu, seperti saat di-hover, saat menjadi elemen pertama, atau ketika di-focus.
Contoh Pseudo-class Umum
a:hover {
color: red;
}
Beberapa pseudo-class yang sering digunakan:
| Pseudo-class |
Fungsi |
:hover |
Saat kursor diarahkan ke elemen |
:focus |
Saat elemen (misalnya input) sedang aktif |
:first-child |
Menargetkan elemen pertama dalam parent-nya |
:last-child |
Menargetkan elemen terakhir dalam parent-nya |
:nth-child(n) |
Menargetkan elemen ke-n dalam parent-nya |
:checked |
Untuk checkbox/radio yang sedang dicentang |
Apa Itu Pseudo-element?
Pseudo-element digunakan untuk menargetkan bagian tertentu dari elemen, seperti huruf pertama, atau untuk menyisipkan konten tambahan.
Contoh Pseudo-element Umum
p::first-line {
font-weight: bold;
}
Beberapa pseudo-element yang sering digunakan:
| Pseudo-element |
Fungsi |
::before |
Menyisipkan konten sebelum elemen |
::after |
Menyisipkan konten setelah elemen |
::first-letter |
Menargetkan huruf pertama dari elemen |
::first-line |
Menargetkan baris pertama dari elemen |
::placeholder |
Untuk mengatur tampilan teks placeholder di input |
Gabungan: Hover + Before
Kita juga bisa menggabungkan pseudo-class dan pseudo-element:
a:hover::after {
content: " 🔗";
}
Artinya: saat tautan di-hover, akan muncul simbol 🔗 setelah teks tautan.
Contoh Lengkap
Contoh berikut menampilkan penggunaan berbagai pseudo-class dan pseudo-element untuk interaksi dan efek tambahan.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Pseudo-class dan Pseudo-element</title>
<style>
a {
text-decoration: none;
color: blue;
}
a:hover {
color: red;
}
a::after {
content: " 🔗";
}
input:focus {
border: 2px solid #3498db;
}
p::first-line {
font-weight: bold;
}
p::first-letter {
font-size: 200%;
color: orange;
}
li:first-child {
color: green;
}
li:last-child {
color: purple;
}
</style>
</head>
<body>
<h1>Contoh Pseudo-class & Pseudo-element</h1>
<a href="#">Link Ini</a>
<p>Ini adalah paragraf dengan pseudo-element yang menargetkan huruf dan baris pertama.</p>
<input type="text" placeholder="Ketik sesuatu..." />
<ul>
<li>Item pertama (first-child)</li>
<li>Item tengah</li>
<li>Item terakhir (last-child)</li>
</ul>
</body>
</html>
Dalam contoh ini, tautan memiliki efek hover dan menampilkan simbol setelah teks. Paragraf menunjukkan huruf pertama yang besar dan baris pertama yang tebal.
Input berubah saat difokuskan, dan daftar menunjukkan first-child serta last-child dengan warna berbeda.
Kesimpulan
Dengan pseudo-class kita bisa menargetkan kondisi tertentu dari elemen, seperti saat di-hover, di-focus, atau urutan elemen.
Sedangkan pseudo-element memungkinkan kita menargetkan bagian spesifik dari elemen, atau menyisipkan konten tambahan secara visual.
Terima Kasih