The CSS 3 selector rekomendasi cukup jelas tentang keduanya, tapi aku akan mencoba untuk menunjukkan perbedaan pula.
Kelas semu
Deskripsi resmi
Konsep pseudo-class diperkenalkan untuk mengizinkan pemilihan berdasarkan informasi yang berada di luar pohon dokumen atau yang tidak dapat diekspresikan menggunakan pemilih sederhana lainnya.
Kelas pseudo selalu terdiri dari "titik dua" ( :) diikuti dengan nama kelas semu dan secara opsional dengan nilai di antara tanda kurung.
Kelas semu diperbolehkan dalam semua urutan penyeleksi sederhana yang terdapat dalam selektor. Kelas semu diizinkan di mana saja dalam urutan penyeleksi sederhana, setelah pemilih tipe utama atau pemilih universal (mungkin dihilangkan). Nama kelas semu tidak peka huruf besar / kecil. Beberapa pseudo-class saling eksklusif, sementara yang lain dapat diterapkan secara bersamaan ke elemen yang sama. Pseudo-class dapat bersifat dinamis, dalam arti bahwa sebuah elemen dapat memperoleh atau kehilangan pseudo-class saat pengguna berinteraksi dengan dokumen.
Sumber
Apa artinya ini?
Sifat penting dari pseudo-class dinyatakan dalam kalimat pertama: " pemilihan izin konsep pseudo-class [...] " . Ini memungkinkan penulis stylesheet untuk membedakan antara elemen berdasarkan informasi yang "terletak di luar pohon dokumen" , misalnya status tautan saat ini ( :active, :visited). Itu tidak disimpan di mana pun di DOM, dan tidak ada antarmuka DOM untuk mengakses opsi ini.
Di sisi lain, :targetdapat diakses melalui manipulasi DOM (Anda dapat menggunakannya window.location.hashuntuk menemukan objek dengan JavaScript), tetapi ini "tidak dapat diekspresikan menggunakan pemilih sederhana lainnya" .
Jadi pada dasarnya pseudo-class akan menyempurnakan himpunan elemen yang dipilih sebagai pemilih sederhana lainnya dalam urutan pemilih sederhana . Perhatikan bahwa semua pemilih sederhana dalam urutan penyeleksi sederhana akan dievaluasi pada saat yang bersamaan. Untuk daftar lengkap pseudo-class, periksa rekomendasi pemilih CSS3.
Contoh
Contoh berikut akan mewarnai semua baris genap dengan abu-abu ( #ccc), semua baris tidak rata yang tidak dapat dibagi 5 putih dan setiap baris lainnya berwarna magenta.
table tr:nth-child(2n) td{
background-color: #ccc;
}
table tr:nth-child(2n+1) td{
background-color: #fff;
}
table tr:nth-child(2n+1):nth-child(5n) td{
background-color: #f0f;
}
Elemen semu
Deskripsi resmi
Pseudo-elemen membuat abstraksi tentang pohon dokumen di luar yang ditentukan oleh bahasa dokumen. Misalnya, bahasa dokumen tidak menawarkan mekanisme untuk mengakses huruf pertama atau baris pertama konten elemen. Elemen semu memungkinkan penulis untuk merujuk ke informasi yang tidak dapat diakses ini. Elemen semu juga dapat memberikan cara kepada penulis untuk merujuk ke konten yang tidak ada dalam dokumen sumber (misalnya, elemen semu ::beforedan ::aftermemberikan akses ke konten yang dihasilkan).
Pseudo-element dibuat dari dua titik dua ( ::) diikuti dengan nama dari pseudo-element.
Ini ::notasi diperkenalkan oleh dokumen saat ini untuk membangun diskriminasi antara pseudo-kelas dan pseudo-elemen. Untuk kompatibilitas dengan style sheet yang ada, agen pengguna juga harus menerima notasi satu titik dua sebelumnya untuk pseudo-element yang diperkenalkan di CSS level 1 dan 2 (yaitu,: first-line,: first-letter,: before dan: after). Kompatibilitas ini tidak diperbolehkan untuk pseudo-elemen baru yang diperkenalkan dalam spesifikasi ini.
Hanya satu pseudo-element yang dapat muncul per selektor, dan jika ada, itu harus muncul setelah urutan penyeleksi sederhana yang mewakili subjek selektor.
Catatan: Versi mendatang dari spesifikasi ini mungkin mengizinkan beberapa elemen semu per pemilih.
Sumber
Apa artinya ini?
Bagian terpenting di sini adalah bahwa "elemen semu memungkinkan penulis untuk merujuk ke [..] informasi yang tidak dapat diakses " dan bahwa mereka "juga dapat memberikan cara kepada penulis untuk merujuk ke konten yang tidak ada dalam dokumen sumber (mis., ::beforedan ::afterpseudo-elemen memberikan akses ke konten yang dihasilkan). ". Perbedaan terbesar adalah mereka benar-benar membuat elemen virtual baru tempat aturan dan bahkan penyeleksi kelas pseudo dapat diterapkan. Mereka tidak memfilter elemen, mereka pada dasarnya memfilter konten ( ::first-line, ::first-letter) dan membungkusnya dalam wadah virtual, yang dapat diatur oleh pembuatnya sesuka dia (yah, hampir).
Misalnya ::first-linepseudo-elemen tidak dapat direkonstruksi dengan JavaScript, karena sangat bergantung pada font yang digunakan saat ini, ukuran font, lebar elemen, elemen mengambang (dan mungkin waktu pada hari itu). Yah, itu tidak sepenuhnya benar: seseorang masih dapat menghitung semua nilai itu dan mengekstrak baris pertama, namun melakukannya adalah aktivitas yang sangat rumit.
Saya kira perbedaan terbesar adalah "hanya satu elemen semu yang dapat muncul per pemilih" . Catatan mengatakan bahwa hal ini dapat berubah, tetapi mulai tahun 2012 saya tidak yakin kami melihat perilaku yang berbeda di masa mendatang ( masih dalam CSS4 ).
Contoh
Contoh berikut akan menambahkan tag bahasa ke setiap kutipan pada halaman tertentu menggunakan pseudo-class :langdan pseudo-element ::after:
q:lang(de)::after{
content: " (German) ";
}
q:lang(en)::after{
content: " (English) ";
}
q:lang(fr)::after{
content: " (French) ";
}
q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
content: " (Unrecognized language) ";
}
TL; DR
Kelas semu bertindak sebagai penyeleksi sederhana dalam urutan penyeleksi dan dengan demikian mengklasifikasikan elemen pada karakteristik non-presentasi, elemen semu membuat elemen virtual baru.
Referensi
W3C