Mengenal Pseudo-class Selector Pada CSS
Pseudo-class - Selector pada CSS memiliki banyak jenis. Mulai dari selector biasa, selector combinator, dsb.
Salah satu jenis selector pada CSS adalah Pseudo-class selector, yang akan kita pelajari pada postingan kali ini.
Kita akan belajar pseudo-class selector mulai dari mengenal definisinya hingga jenis dan penggunaanya.
Langsung saja, mari kita simak penjelasanya di bawah ini.
Pengertian Pseudo-class Selector
Pseudo-class selector adalah selector yang digunakan untuk menentukan atau memberikan style pada kondisi tertentu suatu elemen.
Contohnya ketika kita ingin membuat tag <h1> berubah warna ketika dilewati mouse, maka kita dapat menggunakan pseudo class tipe :hover.
Syntax atau penulisanya dengan tanda titik dua (:) setelah nama selectornya dan diikuti nama tipe pseudo-class-nya
selector:pseudo-class {
property: value;
}
Pseudo-class memiliki banyak jenis, masing-masing memiliki efek tertentu dan ketentuan kondisinya masing-masing.
Berikut daftar jenis pseudo-class beserta penjabaranya masing-masing:
Hover
Pseudo-class ini digunakan untuk memberikan style pada elemen ketika dilewati mouse.
a:hover {
color: red;
}
Ketika mouse melewati tag <a>, warna teksnya akan berubah menjadi merah.
Active
Pseudo-class ini digunakan untuk memberikan style pada elemen ketika diklik mouse.
a:active {
color: red;
}
Ketika mouse mengklik tag <a>, warna teksnya akan berubah menjadi merah.
Focus
Pseudo-class ini digunakan untuk memberikan style pada elemen ketika sedang menjadi target fokus.
Pseudo-class ini hanya dapat diberikan kepada elemen yang dapat difokuskan, seperti input, select, textarea, dll.
input:focus {
background-color: red;
}
Ketika mouse sedang fokus atau mengisi <input> maka warna latar belakangnya berubah menjadi merah.
First-child
Pseudo-class ini digunakan untuk memberi style pada elemen pertama dari induknya.
<div>
<p>First Child</p>
<p>Second Child</p>
</div>
p:first-child {
color: red;
}
Hasilnya.
Last Child
Pseudo-class ini digunakan untuk memberi style pada elemen terakhir dari induknya.
<div>
<p>First Child</p>
<p>Last Child</p>
</div>
p:last-child {
color: red;
}
Hasilnya.
Nth Child
Pseudo-class ini digunakan untuk memberi style pada elemen berdasarkan nomor urut yang telah ditentukan dari induknya.
Nomor urutnya ditulis di dalam kurung buka tutup setelah nama pseudo-class-nya.
<div>
<p>First Child</p>
<p>Second Child</p>
<p>Third Child</p>
<p>Fourth Child</p>
</div>
p:nth-child(3) {
color: red;
}
Hasilnya.
Not
Pseudo-class ini digunakan untuk memberi style pada elemen yang bukan elemen yang telah ditentukan.
<h1>Judul</h1>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
p {
color: blue;
}
:not(p) {
color: red;
}
Hasilnya.
Referensi
Masih banyak jenis pseudo-class selector yang ada, untuk lebih lengkapnya silakan kunjungi tautan berikut.