a:linkまたはのようなものdiv::after...

違いに関する情報は乏しいようです。

CSS 3のセレクタ勧告は、両方についてかなり明確ですが、私はとにかく違いを示すしようとするでしょう。

疑似クラス

公式説明

疑似クラスの概念が導入され、ドキュメントツリーの外側にある情報、または他の単純なセレクターを使用して表現できない情報に基づいて選択できるようになりました。

疑似クラスは常に「コロン」（:）で構成され、その後に疑似クラスの名前が続き、オプションで括弧内の値が続きます。

疑似クラスは、セレクターに含まれる単純なセレクターのすべてのシーケンスで許可されます。疑似クラスは、先行するタイプセレクターまたはユニバーサルセレクター（おそらく省略）の後の、単純なセレクターのシーケンスの任意の場所で使用できます。疑似クラス名は大文字と小文字を区別しません。一部の疑似クラスは相互に排他的ですが、他のクラスは同じ要素に同時に適用できます。疑似クラスは、ユーザーがドキュメントを操作しているときに要素が疑似クラスを取得または失う可能性があるという意味で、動的な場合があります。

ソース

これは何を意味するのでしょうか？

疑似クラスの重要な性質は、最初の文で説明されています：「疑似クラスの概念[...] は選択を許可します」。これにより、リンクの現在のステータス（、）など、「ドキュメントツリーの外部にある」情報に基づいて、スタイルシートの作成者が要素間で異なることができます。これらはDOMのどこにも保存されず、これらのオプションにアクセスするためのDOMインターフェースはありません。:active:visited

一方、:targetDOM操作を介してアクセスできます（window.location.hashJavaScriptでオブジェクトを見つけるために使用できます）が、これは 「他の単純なセレクターを使用して表現することはできません」。

したがって、基本的に疑似クラスは、一連の単純なセレクターの他の単純なセレクターと同様に、選択された要素のセットを改良します。単純なセレクターのシーケンス内のすべての単純なセレクターが同時に評価されることに注意してください。疑似クラスの完全なリストについては、CSS3セレクタの推奨事項を確認してください。

例

次の例では、すべての偶数行を灰色（#ccc）に、5で割り切れないすべての不均一な行を白に、他のすべての行をマゼンタに色分けします。

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;
}

疑似要素

公式説明

疑似要素は、ドキュメント言語で指定されたものを超えて、ドキュメントツリーに関する抽象化を作成します。たとえば、ドキュメント言語は、要素のコンテンツの最初の文字または最初の行にアクセスするメカニズムを提供していません。疑似要素を使用すると、作成者はこの他の方法ではアクセスできない情報を参照できます。疑似要素は、ソースドキュメントに存在しないコンテンツを参照する方法を作成者に提供する場合もあります（たとえば、::beforeおよび::after疑似要素は、生成されたコンテンツへのアクセスを提供します）。

疑似要素は、2つのコロン（::）とそれに続く疑似要素の名前で構成されます。

この::表記は、疑似クラスと疑似要素の区別を確立するために、現在のドキュメントで導入されています。既存のスタイルシートとの互換性のために、ユーザーエージェントは、CSSレベル1および2で導入された擬似要素の以前の1コロン表記（つまり、：first-line、：first-letter、：beforeおよび：after）も受け入れる必要があります。この互換性は、この仕様で導入された新しい疑似要素では許可されていません。

セレクタごとに1つの疑似要素のみが表示され、存在する場合は、セレクタのサブジェクトを表す一連の単純なセレクタの後に表示する必要があります。

注：この仕様の将来のバージョンでは、セレクタごとに複数の疑似要素が許可される可能性があります。

ソース

これは何を意味するのでしょうか？

ここで最も重要な部分は、ということである「擬似要素は著者ができるようにするそうでなければアクセスできない情報[..]を参照してください」と、彼らはその「も作家にソースドキュメント（例えば、内に存在しないコンテンツを参照する方法を提供することができます::beforeおよび::after疑似要素は、生成されたコンテンツへのアクセスを提供します）。最大の違いは、ルールと疑似クラスセレクターさえも適用できる新しい仮想要素を実際に作成することです。それらは要素をフィルターしません。基本的にコンテンツ（::first-line、::first-letter）をフィルターし、それを仮想コンテナーにラップします。これは、作成者が好きなようにスタイル設定できる（まあ、ほぼ）。

たとえば、::first-line疑似要素は、現在使用されているフォント、フォントサイズ、要素の幅、浮動要素（およびおそらく時刻）に大きく依存するため、JavaScriptでは再構築できません。まあ、それは完全に真実ではありません。それらすべての値を計算して最初の行を抽出することもできますが、そうすることは非常に面倒な作業です。

最大の違いは、「セレクタごとに1つの疑似要素のみが表示される可能性がある」ということです。メモには、これは変更される可能性があるとありますが、2012年の時点では、将来的に別の動作が見られるとは思いません（CSS4のままです）。

例

次の例では、疑似クラス:langと疑似要素を使用して、特定のページのすべての引用に言語タグを追加します::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

疑似クラスは、一連のセレクターの中で単純なセレクターとして機能し、それによって非プレゼンテーション特性の要素を分類し、疑似要素は新しい仮想要素を作成します。

参考文献

W3C

• セレクターレベル3
  • 4.セレクター構文
  • 6.6疑似クラス
  • 7.疑似要素
• CSS 2.1仕様（古くなっていますが、有益です）
  • 5.2セレクター構文：

    単純なセレクターは、タイプセレクターまたはユニバーサルセレクターのいずれかで、直後に0個以上の属性セレクター、IDセレクター、または疑似クラスが任意の順序で続きます。すべてのコンポーネントが一致する場合、単純なセレクターが一致します。

  • 5.10疑似要素と疑似クラス

疑似クラスは既存の要素をフィルタリングします。
a:linkはすべて<a>のを意味します:link。

疑似要素は、新しい偽の要素です。
div::afterは、<div>sの後に存在しない要素を意味します。

::selection疑似要素の別の例です。
選択されているすべての要素を意味するわけではありません。これは、選択されたコンテンツの範囲を意味します。これは、複数の要素の一部に及ぶ場合があります。

違いを理解するのに役立つ短い説明：

• 疑似クラスは特別な状態を記述します。
• 疑似要素は仮想要素と一致します。

Sitepointのドキュメントから：

擬似クラスは、 HTML内のクラスに似ていますが、それは、マークアップで明示的に指定されていません。一部の疑似クラスは動的であり、ユーザーがドキュメントを操作した結果として適用されます。- http://reference.sitepoint.com/css/pseudoclasses。これらはのようなものです:hover, :active, :visited。

疑似要素は、ドキュメントツリーに明示的に存在しない仮想要素と一致します。たとえば、ブラウザーウィンドウの幅が変更されると、それらが表す仮想要素が変化する可能性があるため、疑似要素は動的にすることができます。また、CSSルールによって生成されたコンテンツを表すこともできます。- http://reference.sitepoint.com/css/pseudoelements。これらはのようなものですbefore, :after, :first-letter。

概念的な答え：

• 疑似要素は、ドキュメントの一部であるものを参照しますが、まだそれを知らないだけです。たとえば最初の文字。あなただけのテキストがあった前に。これで、ターゲットにできる最初の文字ができました。これは新しい概念ですが、常にドキュメントの一部でした。これには、次のようなものも含まれ::beforeます。そこには実際のコンテンツはありませんが、何か他のものの前にある何かのコンセプトは常にそこにありました-今、それを指定しています。

• 疑似クラスは、DOM内の何かの状態です。クラスが要素に関連付けるタグであるのと同じように、疑似クラスは、通常は状態の変化に対する応答として、ブラウザやDOMなどによって関連付けられるクラスです。ユーザーがリンクにアクセスすると、そのリンクは「訪問済み」の状態になります。ブラウザがクラス「visited」をアンカー要素に適用することを想像できます。:visitedその後、その疑似クラスを選択する方法になります。

以下は簡単な答えです：

要素の状態に基づいてcssを適用する必要がある場合は、疑似クラスを使用します。といった：

1. アンカー要素のホバーにCSSを適用（:hover）
2. HTML要素（:focus）にフォーカスされたときにcssを適用します。等

要素の特定の部分または新しく挿入されたコンテンツに cssを適用する必要がある場合は、疑似要素を使用します。といった：

1. 要素の最初の文字または最初の行にCSSを適用します（::first-letter）
2. 要素のコンテンツの前または後にコンテンツを挿入する（::before、::after）

以下は両方の例です。

<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>

疑似クラス

疑似クラスは、HTMLドキュメントの特定の部分を選択する方法であり、原則として、HTMLドキュメントツリー自体とその要素、または名前、属性、コンテンツなどの特性ではなく、言語エンコードや動的状態などの他のファントム条件に基づいています。要素の。

元の疑似クラスは、時間の経過とともに、またはユーザーの介入によって出入りする要素の動的状態を定義しました。CSS2はこの概念を拡張して、仮想概念ドキュメントコンポーネントまたはドキュメントツリーの推論された部分（最初の子など）を含めました。疑似クラスは、ファントムクラスがさまざまな要素に追加されたかのように動作します。

制限：疑似要素とは異なり、疑似クラスはセレクターチェーンのどこにでも出現できます。

擬似クラスコードの例：

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 */
}

上記の疑似クラスコードのレンダリングを示すページ

疑似要素

PSEUDO-ELEMENTSは、要素のサブパートをアドレス指定するために使用されます。ドキュメントで指定されているものを超えて、要素のコンテンツの一部にスタイルを設定できます。つまり、実際にはドキュメント要素ツリーにない論理要素を定義できます。論理要素を使用すると、暗黙のセマンティック構造をCSSセレクターでアドレス指定できます。

制限：疑似要素は、インラインスタイルではなく、外部およびドキュメントレベルのコンテキストにのみ適用できます。疑似要素は、ルールのどこに現れるかが制限されています。これらは、セレクターチェーンの最後（セレクターの対象の後）にのみ表示されます。これらは、セレクターで見つかったクラスまたはID名の後に来る必要があります。セレクタごとに指定できる疑似要素は1つだけです。単一の要素構造で複数の疑似要素を処理するには、複数のスタイルセレクター/宣言ステートメントを作成する必要があります。

疑似要素は、初期キャップやドロップキャップなどの一般的な活版印刷効果に使用できます。また、ソースドキュメントにない生成されたコンテンツ（ "before"および "after"を使用）にも対応できます。プロパティと値が追加されたいくつかの疑似要素のスタイルシートの例を次に示します。

/ *次のルールは、見出し1の最初の文字を選択し、フォントを背景が緑の2em（筆記体）に設定します。First-letterは、ブロックレベル要素の最初のレンダリングされた文字/文字を選択します。* /

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;
}

出典：リンク

手短に言えば、MDNの疑似クラスから：

CSS 疑似クラスは、選択された要素の特別な状態を指定するセレクターに追加されるキーワードです。たとえば:hover 、ユーザーがボタンにカーソルを合わせたときにスタイルを適用するために使用できます。

div：hover {
  背景色：＃F89B4D;
}

そして、MDNのPseudo-elementsから：

CSS 疑似要素は、選択した要素の特定の部分をスタイルできるようにするセレクターに追加されるキーワードです。たとえば ::first-line、段落の最初の行のスタイルを設定するために使用できます。

/ *すべての<p>要素の最初の行。* /
p :: first-line {
 青色;
 テキスト変換：大文字;
}