web-dev-qa-db-ja.com

CSSの擬似クラスと擬似要素の違いは何ですか？

a:linkまたはdiv::after...

違いに関する情報は少ないようです。

csscss-selectorspseudo-classpseudo-element
81
tybro0103

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

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

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

39
SLaks

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

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

Sitepointドキュメントから：

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

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

10
motoxer4533

概念的な答え：

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

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

5
Gerard ONeill

擬似クラス

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

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

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

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

ソース： リンク

4
Sumant

以下は簡単な答えです：

要素のstateに基づいてcssを適用する必要がある場合は、 pseudo-class を使用します。といった：

  1. アンカー要素のホバーにCSSを適用します（:hover）
  2. Html要素（:focus）。等.

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

  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>
3
Sheo Dayal Singh

簡単に言えば、MDNの 擬似クラス から：

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

 div：hover {
 background-color：＃F89B4D; 
}

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

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

/*すべての<p>要素の最初の行。 */
 p :: first-line {
 color：blue; 
 text-transform：uppercase; 
}
0
DavidRR