css - CSSの疑似クラスと疑似要素の違いは何ですか?

Question

のようなものa:linkやdiv::after...

違いに関する情報はほとんどないようです。

score 88 · Accepted Answer

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 で導入された疑似要素 (つまり、:first-line、:first-letter、:before、:after) の以前の 1 つのコロン表記も受け入れる必要があります。この互換性は、この仕様で導入された新しい疑似要素では許可されていません。

セレクターごとに 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
CSS 2.1 仕様(時代遅れですが、まだ有益です)
- 5.2 セレクタ構文:
  
  単純なセレクターは、タイプセレクターまたはユニバーサルセレクターのいずれかであり、その直後に 0 個以上の属性セレクター、ID セレクター、または疑似クラスが任意の順序で続きます。すべてのコンポーネントが一致する場合、単純なセレクターは一致します。
- 5.10 疑似要素と疑似クラス

score 46 · Accepted Answer

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

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

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

score 18 · Accepted Answer

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

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

score 12 · Accepted Answer

サイトポイントのドキュメントから:

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

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

score 4 · Accepted Answer

疑似クラス

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

元の疑似クラスは、要素の動的状態を定義し、時間の経過とともに、またはユーザーの介入によって開始および終了しました。CSS2 はこの概念を拡張して、仮想概念ドキュメントコンポーネントまたはドキュメントツリーの推定部分 (例: first-child) を含めました。疑似クラスは、ファントムクラスがさまざまな要素に追加されたかのように動作します。

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

擬似クラスコードの例:

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 つだけです。単一の要素構造で複数の疑似要素に対処するには、複数のスタイルセレクター/宣言ステートメントを作成する必要があります。

疑似要素は、イニシャルキャップやドロップキャップなどの一般的なタイポグラフィ効果に使用できます。また、ソースドキュメントにない生成されたコンテンツ (「前」と「後」を使用) に対処することもできます。プロパティと値が追加されたいくつかの疑似要素のスタイルシートの例を次に示します。

/* 次のルールは、見出し 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;
}

出典：リンク

css - CSSの疑似クラスと疑似要素の違いは何ですか?

8 に答える 8

疑似クラス

公式説明

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

例

疑似要素

公式説明

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

例

TL;DR

参考文献

W3C

Related

Reference