Pseudo-Class dan Pseudo-Element di CSS
Setelah memahami tentang combinator di css pada materi sebelumnya, kali ini kita akan belajar tentang Pseudo-class dan Pseudo-element di CSS.
Ketika kita berbicara tentang CSS (Cascading Style Sheets), salah satu konsep dasar yang perlu kita pahami adalah selector. Selector digunakan untuk memilih elemen-elemen HTML yang akan kita beri gaya dengan CSS. Terdapat beragam jenis selector yang dapat kita gunakan dalam CSS, termasuk selector sederhana seperti tag HTML, class, dan id. Namun, terdapat juga selector yang lebih spesifik, yaitu pseudo-class dan pseudo-elemen.
Kita memisahkan pembahasan pseudo-class dan pseudo-elemen dari selector lainnya dalam artikel ini untuk memudahkan pemula dalam memahami konsep-konsep ini secara terstruktur dan tidak merasa kewalahan dengan banyaknya informasi.
Pseudo-Class
Pseudo-class adalah selector yang digunakan untuk memilih elemen yang berada dalam keadaan tertentu yang tidak bisa kita tentukan hanya dengan melihat struktur HTML, misalnya elemen yang sedang di-hover oleh pointer mouse. Pseudo-class biasanya diawali dengan tanda titik dua (:).
Contoh Pseudo-class yang sering digunakan
:hover
Sebagai contoh, pseudo-class :hover digunakan untuk memberikan gaya pada elemen saat mouse berada di atas elemen tersebut.
CSS:
.button:hover {
background-color: lightblue;
cursor: wait;
}
HTML:
<button class="button">Hover di atas tombol</button>
Penjelasan:
Pada contoh di atas, kita menggunakan pseudo-class :hover untuk mengganti warna latar belakang elemen button menjadi lightblue saat pengguna mengarahkan mouse ke atas elemen tersebut. Kita juga mengganti kursor menjadi wait untuk memberi indikasi interaktivitas.
Daftar Pseudo-Class berdasarkan Kelompok Penggunaanya
User Actions
:hover– memilih elemen yang dihover dengan kursor mouse.:active– memilih elemen yang sedang diklik.:focus– memilih elemen yang sedang fokus.
Link
:link– memilih semua tautan yang belum dikunjungi.:visited– memilih semua tautan yang sudah dikunjungi.
Child Elements
:first-child– memilih elemen pertama dari elemen induk.:last-child– memilih elemen terakhir dari elemen induk.:nth-child(n)– memilih elemen ke-n dari elemen induk.
Type
:first-of-type– memilih elemen pertama dari jenisnya dalam elemen induk.:nth-of-type(n)– memilih elemen ke-n dari jenisnya dalam elemen induk.
Form Elements
- :
checked– memilih setiap elemen yang dicentang. :not(selector)– memilih setiap elemen yang tidak cocok dengan selektor yang ditentukan.
Lainnya
:only-child– memilih elemen yang merupakan satu-satunya anak dari elemen induk.:only-of-type– memilih elemen yang merupakan satu-satunya elemen dari jenisnya dalam elemen induk.:nth-last-child(n)– memilih elemen ke-n dari elemen terakhir dari elemen induk.:last-of-type– memilih elemen terakhir dari jenisnya dalam elemen induk.:nth-last-of-type(n)– memilih elemen ke-n dari elemen terakhir dari jenisnya dalam elemen induk.:enabled– memilih setiap elemen yang diaktifkan.:disabled– memilih setiap elemen yang dinonaktifkan.:required– memilih elemen yang memiliki atribut “required”.:optional– memilih elemen yang tidak memiliki atribut “required”.:valid– memilih elemen dengan status valid.:invalid– memilih elemen dengan status tidak valid.
Pseudo-elements
Pseudo-elements mirip dengan pseudo-classes tetapi digunakan untuk mengakses dan mengatur gaya pada bagian tertentu dari elemen, seolah-olah kita menambahkan elemen HTML baru ke dalam markup. Pseudo-elements dimulai dengan dua titik dua (::).
Contoh Pseudo-elements yang sering digunakan
::before
Fungsinya ::before adalah untuk memasukkan konten sebelum konten yang sudah ada dalam elemen HTML. Konten yang ditambahkan dengan ::before secara teknis tidak menjadi bagian dari DOM (Document Object Model), tetapi hanya terlihat sebagai konten visual pada halaman. Ini biasanya digunakan untuk menambahkan dekorasi, ikon, atau konten lain yang memperkaya desain halaman.
CSS:
.custom-list {
list-style: none;
}
.custom-list li::before {
content: "✓ ";
font-size: 16px;
color: green;
}
HTML:
<ul class="custom-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Penjelasan:
Dalam kode CSS di atas, properti list-style: none; digunakan untuk menghilangkan tanda list default yang berupa lingkaran hitam. Kemudian, pseudo-element ::before digunakan untuk menambahkan tanda centang berwarna hijau sebelum setiap item dalam list.
Daftar Pseudo-Elements berdasarkan Kelompok Penggunaanya
Content
::before– digunakan untuk menambahkan konten sebelum konten elemen.::after– digunakan untuk menambahkan konten setelah konten elemen.
Typography
::first-line– memilih baris pertama dari sebuah elemen.::first-letter– memilih huruf pertama dari sebuah elemen.
Lainnya
::selection– memilih bagian teks yang dipilih oleh pengguna.::placeholder– memilih teks placeholder dari elemen form.
Kesimpulan
Dalam artikel ini, kita telah memperkenalkan pseudo-class dan pseudo-elemen sebagai jenis selector dalam CSS. Pseudo-class memungkinkan kita untuk memilih elemen yang berada dalam keadaan tertentu, sedangkan pseudo-elemen memungkinkan kita untuk memilih bagian tertentu dari elemen. Kedua jenis selector ini sangat berguna untuk membuat desain dan interaksi yang lebih kaya dan dinamis dalam pengembangan web.
Apa yang harus dipelajari selanjutnya?
Sekarang anda sudah memahami pseudo class dan pseudo elemen di CSS. Berikutnya pelajari:
Inheritance dan Specificity di CSS
Ayo lanjutkan!
