Dapatkan lebih banyak kekuatan atas desain web Anda menggunakan penyeleksi CSS tingkat lanjut ini.

CSS mendukung berbagai penyeleksi untuk mengidentifikasi elemen penataan gaya, masing-masing dengan seperangkat aturannya sendiri. Meskipun sebagian besar metode seleksi bersifat langsung, kelas semu dan elemen semu memberikan lebih banyak fleksibilitas. Mereka membiarkan Anda memilih elemen berdasarkan status atau posisinya dalam suatu struktur, atau mereka memilih bagian konten tertentu.

Penyeleksi ini mungkin rumit untuk digunakan, dan mudah untuk mencampurkan kelas semu dengan elemen semu, jadi bagaimana Anda membedakannya?

Memahami Kelas Pseudo CSS

Kelas semu CSS seperti kata kunci khusus yang dapat Anda gunakan dengan penyeleksi untuk menata elemen dengan cara berbeda. Kata kunci ini membantu Anda menargetkan elemen ketika hal tertentu terjadi, seperti saat pengguna mengarahkan mouse ke elemen, mengekliknya, atau mengetikkan sesuatu ke dalam kolom masukan.

Kelas semu membuat halaman web Anda lebih interaktif dan responsif dengan mengubah tampilan atau perilaku elemen berdasarkan tindakan pengguna. Ketika kamu

instagram viewer
gunakan dengan pemilih CSS lainnya, mereka memberikan kontrol yang tepat atas gaya dan interaktivitas.

Sintaks dan Penggunaan Kelas Pseudo CSS

Sintaks untuk kelas semu CSS terdiri dari titik dua (:) diikuti dengan nama kelas semu. Berikut sintaks dasarnya:

selector:pseudo-class {
/* styles */
}

Dalam sintaks ini:

  • pemilih mengacu pada elemen atau elemen yang ingin Anda pilih dan terapkan gayanya. Ini bisa berupa elemen HTML, kelas, ID, atau pemilih yang lebih kompleks seperti kombinasi. Pemilihnya bersifat opsional, tetapi biasanya Anda akan menggunakannya; tanpanya, kelas semu Anda akan menargetkan semua elemen yang dapat diterapkannya.
  • kelas semu adalah kata kunci yang mewakili keadaan atau kondisi tertentu yang ingin Anda targetkan.

CSS mengkategorikan kelas semu menjadi beberapa kelompok berdasarkan fungsinya dan kondisi yang ditargetkan. Berikut adalah kategori utama beserta beberapa contohnya:

Interaksi pengguna

: melayang

Memilih elemen ketika penunjuk tetikus melayang di atasnya.

:aktif

Memilih elemen saat pengguna mengaktifkannya, biasanya dengan mengklik.

:dikunjungi

Memilih tautan yang telah dikunjungi pengguna.

Struktural

:anak pertama

Memilih elemen anak pertama dari induk.

:anak terakhir

Memilih elemen anak terakhir dari induk.

:anak ke-n (n)

Memilih elemen berdasarkan posisinya dalam induk, memungkinkan Anda menargetkan anak tertentu.

Terkait Formulir

:dengan disabilitas

Memilih elemen formulir yang dinonaktifkan.

: diperiksa

Memilih tombol radio atau kotak centang yang dicentang.

Status Elemen UI

:tidak sah

Memilih elemen formulir yang tidak valid.

:diperlukan

Memilih bidang elemen formulir yang diperlukan.

:opsional

Memilih elemen formulir yang merupakan bidang opsional.

Terkait Tautan

:tautan

Memilih tautan yang belum dikunjungi.

Berbasis Bahasa

:lang()

Memilih elemen berdasarkan bahasa yang ditentukan dalam atribut “lang”-nya.

Anda dapat mencoba contoh umum dengan menerapkan :efek hover ke gambar di galeri. Gaya yang umum mencakup memperbesar atau memperkecil gambar-gambar ini ketika seseorang mengarahkan kursor ke gambar tersebut.

Menjelajahi Elemen Pseudo CSS

Elemen semu CSS seperti kata kunci khusus yang dapat Anda gunakan dengan penyeleksi untuk memberi gaya pada bagian tertentu dari konten elemen atau untuk menyisipkan konten tambahan. Kata kunci ini memungkinkan Anda menargetkan dan menata gaya elemen berdasarkan struktur kontennya.

Elemen semu menyempurnakan desain dan tata letak halaman web Anda dengan memberi Anda kemampuan untuk menata elemen dengan cara yang biasanya hanya mungkin dilakukan dengan elemen HTML asli.

Sintaks dan Implementasi Elemen Pseudo CSS

Elemen semu di CSS memiliki sintaks khusus yang melibatkan penggunaan dua titik dua (::) diikuti dengan nama elemen semu. Berikut adalah sintaks dasarnya:

selector::pseudo-element {
/* styles */
}

Dalam sintaks ini:

  • pemilih menargetkan elemen yang ingin Anda terapkan elemen semunya. Ini bisa berupa pemilih CSS apa pun yang valid, termasuk tidak ada pemilih sama sekali.
  • elemen semu adalah nama elemen semu yang ingin Anda targetkan. Anda hanya dapat menggunakan satu elemen semu dalam pemilih karena kombinasi keduanya tidak masuk akal.

Berikut adalah beberapa elemen semu:

::sebelum

Menyisipkan konten sebelum konten elemen yang dipilih.

::setelah

Menyisipkan konten setelah konten elemen yang dipilih.

::surat pertama

Memberi gaya pada huruf pertama teks dalam sebuah elemen.

::pilihan

Memberi gaya pada bagian teks yang dipilih pengguna dengan kursornya.

::penanda

Memberi gaya pada kotak penanda item daftar (misalnya, poin-poin atau nomor dalam daftar).

::isyarat

Menerapkan gaya pada isyarat di elemen media seperti

Itu ::sebelum dan ::setelah elemen semu bisa sangat sulit untuk dipahami, jadi mempraktikkannya akan membantu Anda menguasai sisanya.

Persamaan dan perbedaan

Berikut persamaan dan perbedaan antara pseudo-class CSS dan pseudo-elements:

Kelas Pseudo

Elemen Pseudo

Sintaksis

Diawali dengan titik dua (:).

Diawali dengan dua titik dua (::).

Penggunaan

Pilih dan gaya elemen berdasarkan status, posisi, atau interaksi penggunanya.

Memberi gaya pada bagian tertentu dari konten elemen atau membuat elemen virtual.

Penyeleksi

Dapat terjadi di titik mana pun dalam pemilih kompleks atau gabungan.

Harus merupakan komponen terakhir dari pemilih dan hanya dapat muncul satu kali.

Penyisipan Konten

Tidak menyisipkan konten, terutama untuk penataan gaya berdasarkan negara bagian.

Dapat menyisipkan konten atau elemen virtual sebelum atau sesudah konten elemen yang dipilih.

Gaya Tipografi

Biasanya tidak digunakan untuk gaya tipografi.

Digunakan untuk teks dan gaya tipografi (mis., ::baris pertama, ::huruf pertama).

Bagian yang Ditargetkan

Menargetkan seluruh elemen.

Menargetkan bagian tertentu dari konten elemen.

Dukungan Peramban

Umumnya didukung dengan baik.

Umumnya didukung dengan baik, namun beberapa browser lama mungkin memiliki dukungan terbatas.

Kelas semu dan elemen semu penting dalam CSS untuk menciptakan berbagai gaya dan fitur interaktif. Meskipun memiliki beberapa kesamaan, masing-masing memiliki peran uniknya sendiri dalam desain dan pengembangan web.

Kelas Pseudo dan Elemen Pseudo dalam Aksi

Anda dapat berlatih menggunakan kelas semu dan elemen semu CSS di berbagai proyek untuk menilai pemahaman Anda. Contoh proyek mudah yang dapat Anda lakukan antara lain kartu profil, menu navigasi, dan gaya daftar. Proyek-proyek ini memberikan pengalaman langsung untuk meningkatkan keterampilan CSS Anda sambil menggabungkan interaktivitas dan gaya ke dalam desain web Anda.