CSS "::" vs ":" - pseudo-elemento vs pseudo-selettore?

Question

Sto facendo ricerche su css e tipografia e mi sono imbattuto in questo intrigante concetto di pseudo-selettori. Ho usato selettori psuedo del singolo colon e non ho familiarità con la versione a due punti dei selettori di psuedo. I understand quel doppio colon è chiamato pseudo-elemento invece di uno pseudo-selettore - ma perché? E qual è la differenza?

Capisco anche che il singolo colon è molto più supportato, quindi in che situazione si userebbe lo pseudoelemento doppio del colon? Ci sono casi d'uso in cui il doppio colon sarebbe necessario, e il colon singolo non farebbe il lavoro? quale potrebbe essere quella situazione?

"A differenza degli pseudo-elementi, le pseudo-classi possono apparire ovunque nella catena di selettori." (citazione dal link) - Non so quale sia la 'catena di selezione', ma questo sembra anche l'ennesima limitazione dell'approccio del doppio colon. Perché dovrei usare il doppio colon se è (a mio modo di vedere) solo una versione meno supportata del colon singolo?

edit: essi sembrano non essere funzionalmente lo stesso: fiddle

<div><p>First Line</p></div> 
<div><p>Second Line</p></div> 

css

div:nth-child(1) > p { 
    color: green; 
} 

div::nth-child(2) > p { 
    color: blue; 
} 

Answer 1

pseudo-classi (:) consentono allo stile i diversi stati di un elemento per esempio quando si passa il mouse su di esso, quando è disabilitato, quando è il primo figlio del suo genitore, ecc.

Gli pseudo-elementi (::) consentono di applicare stili a parti diverse di un elemento, ad es. la prima riga, la prima lettera, inserendo il contenuto prima o dopo, ecc.

Inizialmente tutti utilizzavano un singolo due punti, ma i CSS3 introducevano il doppio colon per separare i due punti.