Elemen semu dan kelas semu didefinisikan dengan menambahkan kata kunci tertentu setelah pemilih, mengikuti aturan sintaksis yang serupa, dan mengatur gaya yang sesuai di blok aturan CSS. Elemen semu dapat menambah atau mengganti konten melalui atribut konten. Misalnya, :before dan :after dapat menyisipkan teks, gambar, atau konten lain yang dihasilkan. Kelas semu hanya memengaruhi gaya suatu elemen, tetapi tidak menambah atau mengubah konten. Mereka mengubah perilaku elemen berdasarkan interaksi pengguna, struktur dokumen, atau kondisi logis lainnya. Perbedaan utamanya adalah sebagai berikut:
Objek sasaran :
Selektor kelas semu (Pseudo-classes) bertindak berdasarkan elemen aktual yang ada dan digunakan untuk mendeskripsikan status atau hubungan tertentu dari elemen tersebut, seperti status akses tautan ( :visited ), status hover mouse ( :hover ), dan apakah itu sebuah dokumen. elemen anak pertama di ( :first-child ), dll. Mereka tidak secara langsung mengubah struktur elemen, namun mempengaruhi bagaimana elemen berperilaku dalam kondisi tertentu. Elemen semu digunakan untuk membuat dan memilih bagian tertentu dalam suatu elemen atau untuk menghasilkan node konten virtual baru sebelum dan sesudah suatu elemen. Misalnya, :before dan :after dapat digunakan untuk menyisipkan konten tambahan, :first-line dan :first-letter memilih masing-masing baris teks pertama dan huruf pertama elemen, :marker mengontrol gaya tanda item daftar, dll. . Elemen semu ini tidak sesuai dengan elemen sebenarnya dalam dokumen HTML, namun gaya dapat diterapkan padanya seolah-olah elemen tersebut adalah bagian sebenarnya dari dokumen.
Pengidentifikasi tata bahasa :
Kelas semu biasanya diidentifikasi dengan titik dua : :), seperti :hover , :focus . Elemen semu diidentifikasi di CSS3 dengan dua titik dua berturut-turut ( :: ) untuk membedakannya dari kelas semu di CSS versi lama. Meskipun sebagian besar browser modern masih menerima titik dua tunggal untuk mewakili elemen semu (seperti :before ), untuk mematuhi standar W3C dan mempertahankan praktik terbaik, disarankan untuk menggunakan bentuk titik dua ganda, seperti ::before , ::after .
Dapat digunakan kembali :
Kelas semu dapat digabungkan dalam pemilih yang sama, seperti a:hover:focus untuk mewakili tautan yang diarahkan dan difokuskan. Elemen semu umumnya tidak dapat muncul berulang kali dalam pemilih yang sama karena mewakili bagian tertentu dari elemen atau konten baru yang dihasilkan. Sebuah elemen hanya dapat memiliki satu elemen semu :before atau :after yang berlaku secara bersamaan.
Elemen semu CSS3 adalah pemilih CSS khusus yang memungkinkan pengembang menambahkan atau memodifikasi gaya bagian tertentu dari suatu elemen melalui CSS tanpa mengubah struktur HTML, atau untuk menghasilkan dan mengontrol konten virtual di dalam atau di luar elemen. Berikut penjelasan detail dan contoh penerapan beberapa elemen semu CSS3 yang umum:
1. :before dan :after
Elemen semu :before dan :after masing-masing membuat "elemen anak" baru, tanpa konten, dan tidak terlihat setelah area konten elemen yang dipilih. Kemudian, dengan mengatur gaya (seperti konten, ukuran, warna, latar belakang, dll.) pada elemen semu ini, elemen tersebut akan terlihat dan muncul secara visual sebagai bagian yang langsung mengikuti konten elemen aslinya. Konten ini ditentukan oleh atribut content , dan gaya tambahan dapat diterapkan.
tata bahasa :
pemilih:sebelum {
isi: "..." /* atau nilai lain */;
/* Deklarasi gaya lainnya */
}
pemilih:setelah {
isi: "..." /* atau nilai lain */;
/* Deklarasi gaya lainnya */
} Diantaranya, atribut content adalah kunci untuk mendefinisikan konten yang dihasilkan oleh elemen semu. Itu dapat menerima nilai-nilai berikut:
String : Langsung menentukan teks yang akan ditampilkan. Entitas HTML diapit tanda kutip : seperti content: "—"; (tanda hubung). URL : Sisipkan sumber gambar, seperti content: url(image.png); Hasilkan kata kunci konten : seperti content: counter(name); (penghitung) atau content: attr(attribute-name); (dapatkan nilai atribut elemen).
Contoh aplikasi :
1.1. Tambahkan konten dekoratif
Tambahkan kutipan, ikon, atau elemen dekoratif lainnya.
Tambahkan kutipan:
blockquote:sebelum {
isi: kutipan terbuka;
ukuran font: lebih besar;
warna: #666;
}
blockquote:setelah {
isi: kutipan dekat;
}Tambahkan ikon khusus sebelum/sesudah item daftar:
li:sebelum {
konten: url(icon-checkmark.svg);
margin-kanan: 0,5em;
}
li.selesai:setelah {
konten: "2713"; /* Karakter unicode: tanda centang */
warna: hijau;
ukuran font: 1,5em;
perataan vertikal: super;
}1.2. Pelampung bening
:after sering digunakan untuk membuat elemen tingkat blok kosong, dan digunakan dengan clear:both untuk menghilangkan dampak mengambang pada elemen berikutnya dan menghindari masalah "keruntuhan ketinggian".
.clearfix:setelah {
isi: "";
tampilan: meja;
jelas: keduanya;
} Terapkan kelas .clearfix ke elemen kontainer yang float internalnya perlu dibersihkan.
1.3. Mengganti atau memperluas konten HTML
Dengan menggunakan fungsi attr() , Anda dapat mengekstrak nilai dari atribut elemen sebagai konten :after untuk mencapai tampilan teks dinamis.
abbr[judul]:setelah {
isi: " (" attr(judul) ")";
ukuran font: lebih kecil;
warna: abu-abu;
} Dalam contoh ini, ketika mouse diarahkan ke elemen abbr dengan atribut title , tanda kurung abu-abu kecil yang berisi nilai atribut title akan ditampilkan.
1.4. Menerapkan bentuk dan animasi yang kompleks
Dikombinasikan dengan content , background , border dan properti lainnya serta transform , transition atau animation CSS3, Anda dapat menggunakan :after untuk membuat bentuk kompleks dan efek animasi.
.tombol:setelah {
isi: "";
tampilan: blok sebaris;
lebar: 0;
tinggi: 0;
border-top: ⅓em solid transparan;
perbatasan-kanan: ⅓em solid transparan;
batas bawah: ⅓em solid #007BFF;
perbatasan-kiri: ⅓em solid transparan;
margin-kiri: 0.½em;
}
.button:hover:setelah {
transformasi: terjemahkanY(-0,1em);
transisi: transformasi kemudahan masuk-keluar 0,2 detik;
} Kode di atas membuat panah tarik-turun berbentuk segitiga setelah elemen .button dan mengimplementasikan animasi ke bawah yang mulus saat gerakan mouse.
Hal-hal yang perlu diperhatikan
Elemen semu :after harus digunakan dengan atribut content , jika tidak maka tidak akan berpengaruh. Karena :after adalah elemen virtual yang dibuat, operasi DOM tidak dapat dilakukan melalui JavaScript. Meskipun konten yang dihasilkan oleh :after dapat berpartisipasi dalam tata letak, konten tersebut tidak dihitung dalam DOM, tidak memengaruhi semantik, dan tidak memengaruhi fungsi aksesibilitas seperti navigasi keyboard.
Singkatnya, pemilih elemen semu CSS3 sangat memperkaya ekspresi desain web dengan menyisipkan konten khusus setelah konten elemen tanpa mengubah struktur HTML. Penggunaan elemen semu dan teknik CSS lainnya secara mahir dapat membantu pengembang membangun antarmuka web yang lebih indah, responsif, dan mudah dirawat.
2. :first-line dan :first-letter
Pemilih elemen semu :first-line digunakan untuk memberi gaya pada baris pertama teks dalam elemen, sedangkan elemen semu :first-letter digunakan untuk memberi gaya pada huruf pertama dalam elemen.
tata bahasa :
pemilih:baris pertama {
/* Deklarasi gaya */
}
pemilih:huruf pertama {
/* Deklarasi gaya */
}Contoh aplikasi :
Indentasi baris pertama:
artikel p:baris pertama {
indentasi teks: 2em;
}Kapitalisasi dan dekorasi:
artikel h2:huruf pertama {
ukuran font: 2em;
mengapung: kiri;
margin-kanan: 0,5em;
tinggi garis: 0,8;
warna: #8A2BE2;
warna latar belakang: #F8F8FF;
bantalan: 0,⅔em 0,⅓em;
radius batas: 0,5em;
}Pemilih kelas semu CSS3 adalah alat canggih yang memungkinkan pengembang memposisikan dan menerapkan gaya secara tepat berdasarkan status elemen, bukan posisinya di pohon dokumen atau atribut bawaan seperti kelas dan ID. Penyeleksi ini menggunakan struktur sintaksis khusus untuk mendeskripsikan kondisi kondisi elemen yang berbeda, seperti interaksi pengguna, hubungan posisi, karakteristik konten, dll., sehingga mencapai desain web yang dinamis dan responsif. Di bawah ini adalah penjelasan rinci tentang penyeleksi kelas semu CSS3 dan contoh penerapan praktisnya.
1. Pemilih kelas semu statis
:link dan :visited
:link : Digunakan untuk memilih hyperlink (elemen <a> ) yang belum dikunjungi oleh pengguna. Biasanya digunakan untuk mengatur gaya dasar untuk tautan yang belum dikunjungi.
a: tautan {
warna: biru;
dekorasi teks: tidak ada;
} :visited : Pilih link yang telah dikunjungi pengguna. Digunakan untuk mengatur gaya yang berbeda untuk tautan yang dikunjungi.
a: mengunjungi {
warna: ungu;
} 2. Pemilih kelas semu interaksi pengguna :hover , :focus , :active
:hover : Mencocokkan elemen ketika penunjuk tetikus melayang di atasnya.
tombol: arahkan kursor {
warna latar belakang: #f0f0f0;
kursor: penunjuk;
} :focus : Pilih elemen yang menerima fokus, biasanya ditemukan di kontrol formulir atau elemen yang dapat difokus (seperti <input> , <textarea> , <button> , dll.).
masukan:fokus {
garis besar: 2px padat #007BFF;
bayangan kotak: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
} :active : Digunakan untuk menunjukkan bahwa pengguna sedang mengaktifkan atau menekan suatu elemen (biasanya dengan klik mouse atau tekan pada layar sentuh).
a: aktif {
warna: merah;
berat font: tebal;
} 3. Penyeleksi kelas semu terstruktur :first-child , :last-child , :only-child , :nth-child(n) , dll.
:first-child : Memilih elemen yang merupakan anak pertama dari elemen induknya.
li:anak pertama {
tipe gaya daftar: persegi;
} :last-child : Memilih elemen yang merupakan anak terakhir dari elemen induknya.
div > p:anak terakhir {
margin-bawah: 0;
} :only-child : Memilih elemen yang tidak memiliki saudara kandung.
.message:anak tunggal {
lebar batas: 2 piksel;
} :nth-child(n) : Pilih elemen turunan ke-n dari elemen induknya, dimana n dapat berupa angka, kata kunci ( even , odd ) atau rumus (seperti 2n+1 ).
li:anak ke-n(2n) {
warna latar belakang: #f9f9f9;
}4. Penyeleksi kelas semu terkait konten
:empty , :target , :enabled , :disabled , :checked , dll.
:empty : Pilih elemen tanpa konten apa pun (termasuk elemen anak, node teks, dll.).
div.kosong:kosong {
tampilan: tidak ada;
} :target : Pilih elemen yang pengidentifikasi fragmen URL-nya saat ini (hash) cocok dengan ID elemen.
#konten:target {
warna latar: kuning muda;
} :enabled dan :disabled: Pilih elemen formulir dalam status aktif dan nonaktif.
masukan:diaktifkan {
warna latar belakang: putih;
}
masukan: dinonaktifkan {
opacity: 0,6;
kursor: tidak diperbolehkan;
} :checked : Digunakan ketika kotak centang ( <input type="checkbox"> ), tombol radio ( <input type="radio"> ) atau elemen <option> dipilih.
masukan[type="kotak centang"]:dicentang + label {
dekorasi teks: garis demi garis;
}5. Meniadakan penyeleksi kelas semu
:not(selector)
:not() : Memilih elemen yang tidak cocok dengan pemilih yang ditentukan dalam tanda kurung.
/* Kecuali semua paragraf dengan kelas "exclude" */
p:tidak(.mengecualikan) {
warna: hijau;
}6. Penyeleksi kelas semu lainnya
:root , :nth-of-type(n) , :nth-last-of-type(n) , :first-of-type , :last-of-type , :only-of-type dan seterusnya.
:root : Pilih elemen root dokumen (biasanya elemen <html> dalam dokumen HTML).
:akar {
--warna primer: #3498db;
} :nth-of-type(n) dan :nth-last-of-type(n): Mirip dengan :nth-child(n) , tetapi hanya untuk elemen turunan bertipe tertentu di antara elemen saudara.
artikel: tipe ke-n (genap) {
warna latar belakang: #f5f5f5;
} :first-of-type , :last-of-type dan :only-of-type: masing-masing memilih elemen anak pertama, terakhir, atau satu-satunya dari tipe tertentu di antara elemen saudara.
div > p: tipe pertama {
berat font: tebal;
}Dengan menguasai penyeleksi kelas semu CSS3 di atas dan skenario aplikasinya, pengembang dapat menulis kode CSS yang lebih efisien, ekspresif, dan interaktif untuk meningkatkan pengalaman pengguna dan efek visual situs web. Seiring dengan berkembangnya standar CSS, semakin banyak penyeleksi kelas semu baru yang dapat bergabung dengan CSS3 untuk menyediakan metode kontrol yang lebih kaya dan canggih untuk pengembangan front-end.
Baik itu kelas semu atau elemen semu, semuanya dirancang untuk meningkatkan fungsionalitas pemilih CSS, memungkinkan pengembang mengontrol gaya dan tata letak elemen dengan lebih baik tanpa mengubah struktur HTML.
Demikianlah artikel kali ini tentang perbedaan, penjelasan detail dan contoh penerapan elemen semu CSS3 dan penyeleksi kelas semu CSS3. Untuk informasi lebih lanjut tentang elemen semu CSS3 dan penyeleksi kelas semu, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan browsing. Artikel terkait di bawah ini, saya harap Anda mendukung downcodes.com di masa mendatang!