pseudo-class
pseudo-classは、左側のセレクターに続けて「〜が」と読みます。
/* liが最初の子だった場合 */ li:first-child{ margin-top:0; }
「〜が」だから、左側がマッチする要素です（上の例ではli）。
pseudo-element
pseudo-elementは、左側のセレクターに続けて「〜の」と読みます。
/* liの先頭文字 */ li::first-letter{ font-size:3em; }
「〜の」だから、右側がマッチする要素です（上の例では::first-letter）。
まとめ
どちらもpseudoと付いていますが、全く性質の異なるものです。
しかし古い仕様ではコロンがどちらも１つで記述されていて（例えば:first-letterとか）、紛らわしいという問題がありました。
なので最新の仕様では
- pseudo-classにつくコロンの数は１つ（:first-childとか:last-childとか）
- pseudo-elementにつくコロンの数は２つ（::first-letterとか::beforeとか）
というのが、正式な文法となっています。
ただし古いCSSと互換性を保つために、大体のブラウザではコロン１つでも通るようになっています。
余談
ちなみにnehan.jsの場合、コロンの数は厳密に区別します。
つまり::first-letterとすべきところを:first-letterと書いてしまうと、単に「未定義のpseudo-class」と見なされてしまいます。
Nehan.setStyle(".foo:first-letter", {fontSize:"3em"}); // NG（未定義のpseudo-class） Nehan.setStyle(".foo::first-letter", {fontSize:"3em"}); // OK!
