Hal-hal seperti a:linkatau div::after...

Informasi tentang perbedaan tersebut tampaknya langka.

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

• Penyeleksi Level 3
  • 4. Sintaks pemilih
  • 6.6 Kelas semu
  • 7. Elemen semu
• Spesifikasi CSS 2.1 (ketinggalan zaman tapi masih informatif)
  • 5.2 Sintaks pemilih :

    Pemilih sederhana adalah pemilih jenis atau pemilih universal yang segera diikuti oleh nol atau lebih pemilih atribut, pemilih ID, atau kelas semu, dalam urutan apa pun. Pemilih sederhana cocok jika semua komponennya cocok.

  • 5.10 Elemen-semu dan kelas-semu

Kelas pseudo memfilter elemen yang ada.
a:linkberarti semua <a>itu :link.

Pseudo-element adalah elemen palsu baru.
div::afterberarti elemen yang tidak ada setelah <div>s.

::selectionadalah contoh lain dari elemen semu.
Ini tidak berarti semua elemen yang dipilih; itu berarti rentang konten yang dipilih, yang dapat mencakup bagian dari banyak elemen.

Deskripsi singkat yang membantu saya memahami perbedaannya:

• Pseudo-class mendeskripsikan status khusus.
• Elemen semu cocok dengan elemen virtual.

Dari dokumen Sitepoint:

Kelas semu mirip dengan kelas dalam HTML, tetapi tidak ditentukan secara eksplisit dalam markup. Beberapa pseudo-class bersifat dinamis — mereka diterapkan sebagai hasil dari interaksi pengguna dengan dokumen. - http://reference.sitepoint.com/css/pseudoclasses . Ini akan menjadi seperti ini :hover, :active, :visited.

Elemen semu cocok dengan elemen virtual yang tidak ada secara eksplisit di pohon dokumen. Elemen semu dapat bersifat dinamis, karena elemen virtual yang diwakilinya dapat berubah, misalnya, jika lebar jendela browser diubah. Mereka juga dapat mewakili konten yang dihasilkan oleh aturan CSS. - http://reference.sitepoint.com/css/pseudoelements . Ini akan menjadi seperti ini before, :after, :first-letter.

Di bawah ini adalah jawaban sederhananya:

Kami menggunakan pseudo-class ketika kami perlu menerapkan css berdasarkan status elemen. Seperti:

1. Terapkan css saat mengarahkan kursor ke elemen jangkar ( :hover)
2. Terapkan css saat fokus pada elemen html ( :focus). dll.

Kami menggunakan pseudo-element ketika kami perlu menerapkan css ke bagian tertentu dari sebuah elemen atau konten yang baru disisipkan . Seperti:

1. Menerapkan css ke huruf pertama atau baris pertama elemen ( ::first-letter)
2. Sisipkan konten sebelum, atau setelah, konten elemen ( ::before, ::after)

Di bawah ini adalah contoh keduanya:

<html>

 <head>
   <style>
   p::first-letter {  /* pseudo-element */
     color: #ff0000;
   }

   a:hover {          /* pseudo-class */
     color: red;      
   }
   </style>
 </head>

 <body>
   <a href="#" >This is a link</a>
   <p>This is a paragraph.</p>
 </body>

</html>

Jawaban konseptual:

• Pseudo-element merujuk pada hal-hal yang merupakan bagian dari dokumen, tetapi Anda belum mengetahuinya. Misalnya huruf pertama. Sebelumnya Anda hanya memiliki teks. Sekarang Anda memiliki huruf pertama yang bisa Anda targetkan. Ini adalah konsep baru, tetapi selalu menjadi bagian dari dokumen. Ini juga mencakup hal-hal seperti ::before; Meskipun tidak ada konten aktual di sana, konsep tentang sesuatu sebelum sesuatu yang lain selalu ada - sekarang Anda yang menentukannya.

• Kelas pseudo adalah status dari sesuatu di DOM. Sama seperti kelas adalah tag yang Anda kaitkan dengan elemen, kelas semu adalah kelas yang dikaitkan oleh browser atau DOM atau apa pun, biasanya sebagai respons terhadap perubahan status. Ketika seorang pengguna mengunjungi sebuah tautan - tautan itu dapat mengambil status 'dikunjungi'. Anda dapat membayangkan browser menerapkan kelas 'mengunjungi' ke elemen Anchor. :visitedakan menjadi bagaimana Anda memilih kelas semu itu.

Kelas Semu

Kelas semu adalah cara memilih bagian tertentu dari dokumen HTML, pada prinsipnya tidak berdasarkan pada pohon dokumen HTML itu sendiri dan elemennya atau pada karakteristik seperti nama, atribut, atau konten, tetapi pada kondisi bayangan lain seperti pengkodean bahasa atau status dinamis dari suatu elemen.

Pseudo-class mendefinisikan status dinamis dari elemen yang masuk dan keluar dari waktu ke waktu, atau melalui intervensi pengguna. CSS2 memperluas konsep ini untuk memasukkan komponen dokumen konseptual virtual atau bagian yang disimpulkan dari pohon dokumen misalnya anak pertama. Kelas semu beroperasi seolah-olah kelas hantu ditambahkan ke berbagai elemen.

BATASAN: Tidak seperti pseudo-elemen, pseudo-class dapat muncul di mana saja dalam rantai pemilih.

Contoh kode kelas semu:

a:link /* This selects any "a" element whose target has not been visited.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #99FF99; /* set to a pastel green */
border-top : 2px solid #ccffcc; /* highlight color */
border-left : 2px solid #ccffcc; /* highlight color */
border-bottom : 2px solid #003300; /* shadow color */
border-right : 2px solid #003300; /* shadow color */
}

a:visited /* This selects any "a" element whose target has been visited.*/
{ padding : 4px;
text-decoration : none;
color : #000000; /* black text color */
background-color : #ccccff; /* set to a lavender */
border-top : 2px solid #ffffff; /* highlight color */
border-left : 2px solid #ffffff; /* highlight color */
border-bottom : 2px solid #333366; /* shadow color *
border-right : 2px solid #333366; /* shadow color */
}

a:hover /* This selects any "a" element which is in a hover state. This is a state during pointer movement within the rendering region of an element. The user designates an element but does not activate it. */
{
color : #000000; /* black text color */
background-color : #99cc99; /* desaturated color */
border-top : 2px solid #003300; /* shadow color */
border-left : 2px solid #003300; /* shadow color */
border-bottom : 2px solid #ccffcc; /* highlight color */
border-right : 2px solid #ccffcc; /* highlight color */
}

a:focus /* This selects any "a" element which currently has focus. Focus is a state during which an element accepts keyboard input or other forms of text input. */
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ffff99; /* set to a pastel yellow */
border-top : 2px solid #ffffcc; /* highlight color */
border-left : 2px solid #ffffcc; /* highlight color */
border-bottom : 2px solid #666633; /* shadow color */
border-right : 2px solid #666633; /* shadow color */
}

a:active /* This selects any "a" element which is in a state of activation. Active is a state during pointer activation (eg: press and release of a mouse) within the rendering region of an element.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ff99ff; /* set to a pink */
border-top : 2px solid #ffccff; /* highlight color */
border-left : 2px solid #ffccff; /* highlight color */
border-bottom : 2px solid #663366; /* shadow color */
border-right : 2px solid #663366; /* shadow color */
}

Halaman yang menunjukkan rendering kode kelas-semu di atas

Elemen semu

PSEUDO-ELEMENTS digunakan untuk menangani sub-bagian elemen. Mereka memungkinkan Anda menyetel gaya pada bagian konten elemen melebihi apa yang ditentukan dalam dokumen. Dengan kata lain, mereka mengizinkan elemen logis untuk didefinisikan yang sebenarnya tidak ada dalam pohon elemen dokumen. Elemen logika memungkinkan struktur semantik tersirat untuk ditangani di pemilih CSS.

BATASAN: Elemen semu hanya dapat diterapkan pada konteks tingkat dokumen dan eksternal - bukan untuk gaya sebaris. Elemen semu dibatasi di tempat mereka dapat muncul dalam aturan. Mereka mungkin hanya muncul di akhir rantai pemilih (setelah subjek selektor). Nama tersebut harus muncul setelah nama kelas atau ID yang ditemukan di pemilih. Hanya satu elemen semu yang dapat ditentukan per pemilih. Untuk mengatasi beberapa elemen pseudo pada satu elemen struktur, pernyataan pemilih / deklarasi beberapa gaya harus dibuat.

Elemen semu dapat digunakan untuk efek tipografi umum seperti huruf awal dan penutup lepas. Mereka juga dapat menangani konten yang dihasilkan yang tidak ada dalam dokumen sumber (dengan "sebelum" dan "setelah") Contoh style sheet dari beberapa pseudo-elemen dengan properti dan nilai yang ditambahkan mengikuti.

/ * Aturan berikut memilih huruf pertama dari heading 1 dan mengatur fonta menjadi 2em, kursif, dengan latar belakang hijau. Huruf pertama memilih huruf / karakter pertama yang dirender untuk elemen level blok. * /

h1:first-letter {
font-size : 2em;
font-family : "Lucida Handwriting", "Lucida Sans", "Lucida Console", cursive;
background-color : #ccffcc;
}

/* The following rule selects the first displayed line in a paragraph and makes it bold. First-line selects the first rendered line on the output device of a block-level element. */

p:first-line {
font-weight : bold;
}

/* The following rule selects any content placed before a blockquote and inserts the phrase "Quote of the day:" in bold small caps with a green background. */

blockquote:before {
content : "Quote of the day:";
background-color : #ccffcc;
font-weight : bold;
font-variant : small-caps;
}

/* The following rule selects any content placed before a "q" element and inserts the smart open quote. */

q:before {
content : open-quote;
}

/* The following rule selects any content placed after a "q" element and inserts the smart close quote. */

q:after{
content : close-quote;
}

Sumber: Link

Singkatnya, dari Pseudo-class di MDN:

Kelas semu CSS adalah kata kunci yang ditambahkan ke selektor yang menetapkan status khusus dari elemen yang dipilih. Misalnya, :hover dapat digunakan untuk menerapkan gaya saat pengguna mengarahkan kursor ke tombol.

div: hover {
  warna-latar belakang: # F89B4D;
}

Dan, dari Pseudo-elements di MDN:

Elemen semu CSS adalah kata kunci yang ditambahkan ke selektor yang memungkinkan Anda memberi gaya pada bagian tertentu dari elemen yang dipilih. Misalnya, ::first-linedapat digunakan untuk memberi gaya pada baris pertama paragraf.

/ * Baris pertama dari setiap elemen <p>. * /
p :: baris pertama {
 warna biru;
 text-transform: huruf besar;
}