La raccomandazione del selettore CSS 3 è abbastanza chiara su entrambi, ma cercherò comunque di mostrare le differenze.
Pseudo-classi
Descrizione ufficiale
Il concetto di pseudo-classe viene introdotto per consentire la selezione basata su informazioni che si trovano al di fuori dell'albero del documento o che non possono essere espresse utilizzando altri semplici selettori.
Una pseudo-classe è sempre costituita da un "due punti" ( :) seguito dal nome della pseudo-classe e, facoltativamente, da un valore tra parentesi.
Le pseudo-classi sono consentite in tutte le sequenze di selettori semplici contenuti in un selettore. Le pseudo-classi sono consentite ovunque nelle sequenze di selettori semplici, dopo il selettore di tipo iniziale o il selettore universale (eventualmente omesso). I nomi delle pseudo-classi non fanno distinzione tra maiuscole e minuscole. Alcune pseudo-classi si escludono a vicenda, mentre altre possono essere applicate simultaneamente allo stesso elemento. Le pseudo-classi possono essere dinamiche, nel senso che un elemento può acquisire o perdere una pseudo-classe mentre un utente interagisce con il documento.
fonte
Cosa significa questo?
L'importante natura delle pseudo-classi è dichiarata nella primissima frase: "il concetto di pseudo-classe [...] permette la selezione " . Consente all'autore di un foglio di stile di differire tra gli elementi in base alle informazioni che "si trovano al di fuori dell'albero del documento" , ad esempio lo stato corrente di un collegamento ( :active, :visited). Quelli non vengono salvati da nessuna parte nel DOM e non esiste un'interfaccia DOM per accedere a queste opzioni.
D'altra parte, si :targetpotrebbe accedere tramite la manipolazione DOM (si potrebbe usare window.location.hashper trovare l'oggetto con JavaScript), ma questo "non può essere espresso usando gli altri semplici selettori" .
Quindi fondamentalmente una pseudo-classe raffinerà l'insieme di elementi selezionati come qualsiasi altro selettore semplice in una sequenza di selettori semplici . Si noti che tutti i selettori semplici in una sequenza di selettori semplici verranno valutati contemporaneamente. Per un elenco completo delle pseudo-classi, controlla la raccomandazione del selettore CSS3.
Esempio
L'esempio seguente colorerà tutte le righe pari di grigio ( #ccc), tutte le righe irregolari che non sono divisibili per 5 bianche e ogni altra riga di 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;
}
Pseudo-elementi
Descrizione ufficiale
Gli pseudo-elementi creano astrazioni sull'albero del documento oltre a quelle specificate dal linguaggio del documento. Ad esempio, i linguaggi dei documenti non offrono meccanismi per accedere alla prima lettera o alla prima riga del contenuto di un elemento. Gli pseudo-elementi consentono agli autori di fare riferimento a queste informazioni altrimenti inaccessibili. Pseudo-elementi possono anche fornire agli autori un modo per riferirsi al contenuto che non esiste nel documento di origine (ad esempio, la ::beforee ::afterpseudo-elementi danno accesso al contenuto generato).
Uno pseudoelemento è composto da due due punti ( ::) seguiti dal nome dello pseudoelemento.
Questa ::notazione è introdotta dal presente documento al fine di stabilire una discriminazione tra pseudo-classi e pseudo-elementi. Per compatibilità con i fogli di stile esistenti, i programmi utente devono anche accettare la precedente notazione di un punto e virgola per gli pseudo-elementi introdotti nei livelli CSS 1 e 2 (vale a dire,: first-line,: first-letter,: before e: after). Questa compatibilità non è consentita per i nuovi pseudo-elementi introdotti in questa specifica.
Può comparire un solo pseudo-elemento per selettore, e se presente deve comparire dopo la sequenza di selettori semplici che rappresenta i soggetti del selettore.
Nota: una versione futura di questa specifica potrebbe consentire più pseudo-elementi per selettore.
fonte
Cosa significa questo?
La parte più importante qui è che "gli pseudo-elementi consentono agli autori di fare riferimento a [..] informazioni altrimenti inaccessibili " e che "possono anche fornire agli autori un modo per fare riferimento a contenuti che non esistono nel documento di origine (ad esempio, il ::beforee gli ::afterpseudo-elementi danno accesso al contenuto generato). ". La differenza più grande è che in realtà creano un nuovo elemento virtuale su cui è possibile applicare regole e persino selettori di pseudo-classe. Non filtrano gli elementi, fondamentalmente filtrano il contenuto ( ::first-line, ::first-letter) e lo avvolgono in un contenitore virtuale, che l'autore può modellare come vuole (beh, quasi).
Ad esempio, lo ::first-linepseudo-elemento non può essere ricostruito con JavaScript, poiché dipende fortemente dal carattere attualmente utilizzato, dalla dimensione del carattere, dalla larghezza degli elementi, dagli elementi mobili (e probabilmente dall'ora del giorno). Bene, non è del tutto vero: si potrebbero ancora calcolare tutti quei valori ed estrarre la prima riga, tuttavia farlo è un'attività molto complicata.
Immagino che la differenza più grande sia che "può apparire solo uno pseudo-elemento per selettore" . La nota dice che questo potrebbe essere soggetto a modifiche, ma a partire dal 2012 non credo che vedremo alcun comportamento diverso in futuro ( è ancora in CSS4 ).
Esempio
Il seguente esempio aggiungerà un tag di lingua a ogni citazione su una data pagina utilizzando la pseudo-classe :lange lo pseudo-elemento ::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
Le pseudo-classi agiscono come semplici selettori in una sequenza di selettori e quindi classificano gli elementi in base a caratteristiche non presentazionali, gli pseudo-elementi creano nuovi elementi virtuali.
Riferimenti
W3C