CSSプロパティの詳しい説明

CSS 疑似クラスは、特定のセレクターに特殊効果を追加するために使用されます。

CSS 疑似要素は、特定のセレクターに特殊効果を追加するために使用されます。

2 つの点を明確にできます。1 つ目は、両方ともセレクターに関連しているということ、2 つ目は、いくつかの「特別な」効果を追加するということです。ここで特に言及しているのは、この 2 つが他の CSS では記述できないものを記述していることです。

疑似クラス型

疑似要素型

違い

ここでは、比較のために疑似クラス:first-childと疑似要素:first-letterを使用します。

p>i:first-child {color: red}<p><i>first</i><i>second</i></p>

//Pseudo class :first-child 最初の子要素にスタイルを追加します
疑似クラスを使用せず、上記の効果を実現したい場合は、次のようにすることができます:

.first-child {color: red}<p><i class="first-child">first</i><i>second</i></p>

つまり、スタイルを追加します最初の子要素クラスに追加し、このクラスのスタイルを定義します。次に、要素の最初の文字にスタイルを追加する方法を見てみましょう:

p:first-letter {color: red}<p>I am stephen lee.</p>

// 擬似要素 : first-letter
それでは、擬似要素を使用しない場合、上記の効果を達成するにはどうすればよいでしょうか?

.first-letter {color: red}<p><span class='first-letter'>I</span> am stephen lee.</p>

つまり、最初の文字にスパンを追加し、そのスパンにスタイルを追加します。
両者の違いが出てきました。つまり、

疑似クラスの効果は実際のクラスを追加することで実現できますが、疑似要素の効果は実際の要素を追加することで実現する必要があるのが、その一方が疑似クラスと呼ばれる理由です。その他は擬似要素と呼ばれます。

まとめ

擬似要素と擬似クラスが混同されやすいのは、効果や書き方が似ているからですが、実は両者を区別するためにCSS3では擬似クラスを明確に規定しています。はコロンで表され、擬似要素は 2 つのコロンで表されます。

:Pseudo-classes  ::Pseudo-elements

しかし、互換性の問題により、ほとんどの場合はまだ単一のコロンが使用されています。ただし、互換性の問題に関係なく、書くときは良い習慣を身につけ、この 2 つを区別するように最善を尽くす必要があります。