web-dev-qa-db-ja.com

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

div::after {}とdiv:after {}の違いは何ですか？ ::ではなく:を使用する必要があるのはいつですか？

二重コロンおよび単一コロン表記は、疑似クラスと疑似要素を区別するためのものです。

上記の声明の実際の意味は何ですか？

csscss-selectorspseudo-element
48
Alice

から https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements

擬似クラス：

CSS擬似クラスは、選択された要素をスタイルすることを指定するためにセレクターの末尾に追加されるコロン（:)が前に付いたキーワードであり、特定の状態にある場合のみ。たとえば、マウスポインターがマウスポインターを置いたときにのみ要素のスタイルを設定したり、無効化またはチェックされたときにチェックボックスを設定したり、DOMツリーの親の最初の子である要素をスタイルしたい場合があります。

例：

  • ：アクティブ
  • ：チェック済み
  • ：nth-​​child（）
  • ：最初
  • ：ホバー

擬似要素::

擬似要素は擬似クラスに非常に似ていますが、違いがあります。これらはキーワードであり、今回は2つのコロン（：:)で始まり、セレクターの末尾に追加して要素の特定の部分を選択できます。

例：

  • ::後
  • ：：前
  • ：：最初の文字
  • ::最初の行
  • ：：選択
  • ::背景

@stephanmgによると：

実際には、ブラウザの互換性のために、:: beforeは：beforeとして、:: afterは：afterとして使用されます。どちらも擬似要素ですが、擬似クラスのように見える場合があります。 CSSコードを読んだ場合、これは混乱するかもしれません。

44
Bas van Dijk

擬似クラス：要素の位置またはそのインタラクティブな状態に応じて、ブラウザによって自動的に適用されます。

例：

E:hoverカーソルがその上にあるときに、タイプEの要素に一致します。

Pseudo-elements： HTML階層内の位置に基づいてコンテンツにスタイルを適用します。

例：

E::first-letterこれは、ブロックレベル要素E内の最初の行の最初の文字にスタイルを適用します。

つまり、

CSS3 Selectors仕様では、疑似要素の前に1つではなく2つのコロンを付けています。したがって、：first–letterは:: first-letterになり、：first-lineは:: first-lineになります。 IE 8以前では、ダブルコロンプレフィックスが認識されないため、古いブラウザーでスタイルが壊れないようにするには、シングルコロンバージョンを使用する必要があります。

8
Ehsan