Konsep Pseudo di CSS3
Melalui kelas ini, kamu diajak untuk:
- Mengenal dasar pseudo di dalam pemrograman CSS3.
- Mengidentifikasi perbedaan pseudo-element dan pseudo-class
Cukup dengan CSS3
Kemampuan CSS3 dalam desain web tidak berhenti dalam memperkaya tampilan. CSS3 ternyata mampu menempatkan fitur interaktif di website yang biasanya baru bisa jalan lewat bantuan JavaScript.
CSS3 menyediakan pseudo-class dan pseudo-element. Kemampuannya memang terbatas, namun cukup membantu memperkaya website.
Perbedaan Pseudo
Pseudo, seperti artinya berarti semu, adalah teknik menambahkan selektor baru yang sebelumnya tidak ada dalam selektor HTML-CSS untuk memberi efek tertentu. Pseudo dalam CSS3 terbagi menjadi dua: pseudo-class dan pesudo-element. Keduanya dibedakan berdasarkan sintaksnya, seperti ":"" untuk pseudo-class dan "::"" untuk pseudo-element. Untuk penjelasannya, lihat bagan berikut:
Pseudo-Class
Penambahan elemen ke dalam selektor untuk memberi efek tertentu.
Pseudo-Element
Memisahkan styling terpisah untuk bagian dari elemen HTML yang sudah ada.
Pseudo-Class
Lewat pseudo-class, CSS3 menyediakan pilihan interaktif siap pakai untuk memperkaya styling elemen.
Misalnya ketika kita menginginkan warna tombol berubah saat user mengarahkan kursor, maka kita bisa gunakan hover. Berikut penerapannya:
selector:pseudo-class {
property: value;
}User Action Pseudo-Class
Pseudo-class ini membutuhkan interaksi user untuk bekerja, seperti mengarahkan kursor atau mengklik satu elemen tertentu.
:hover
Merekam arah kursor user dan memprosesnya menjadi efek dalam elemen HTML.
:active
Memberi tanda setiap kali user melakukan klik.
Location Pseudo-Class
Pseudo-class ini menarget link atau dokumen serupa dalam struktur HTML.
:visited
Membuat efek tertentu dari tombol yang merujuk ke sebuah laman.
:link
Menghubungkan tautan yang belum dikunjungi user.
Tree Structural
Berkaitan dengan rumus siblings dalam HTML. Tree-structural berguna untuk menarget salah semua atau salah satu class yang memiliki sibling.
:root
Mengatur pondasi dasar yang dipakai dalam dokumen HTML yang akan mempengaruhi seluruh styling.
:nth-child
Memilih salah satu class yang bernaung dalam siblings. Untuk memilihnya, gunakan penghtingungan An(jumlah)+B.
Pseudo-Element
Pernahkah melihat ikon yang berputar saat diklik? Interaksi seperti itu merupakan efek dari pseudo-element, teknik menambahkan elemen baru dari tag sebelumnya. Misalnya lihat kode berikut.
selector::pseudo-element {
property: value;
}Pseudo-element membantu mengatur kondisi setiap interaksi user. Ada berbagai jenis yang bisa dipakai. Mari kita rinci penjelasannya.
::first-line
Mengganti baris pertama dalam kode.
::before
Menetapkan kondisi sebelum proses interaksi.
::after
Untuk memperbarui kondisi dengan konten baru yang ditambahkan.