【CSS】擬似要素と擬似クラスの違いの覚書

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。
擬似要素と擬似クラスをまとめる前に違いを覚えておくためのメモ。

最初に書いておくとW3Cの日本語訳や色々なサイトを見ましたが、小難しい説明できちんと理解はまだ出来ていません。

擬似要素(Pseudo-elements)の概要

擬似要素は要素内の一部（特定のパーツ）に対してスタイルを適用する。

CSS3までで勧告されているのは以下の4つ。

• ::before
• ::after
• ::first-letter
• ::first-line

他に、::selectionがCSS3で草案止まり、::backdropと言うのが実験段階であるようです。

::first-letterが、最初の一文字目のみに、::first-lineが文章の一行目のみにスタイルが適用されるように、要素内の一部に対してというのが特徴。::beforeや::afterに関しては考えると分かりづらくなるが要素内に存在しない要素を作っている感じらしい。

ちなみに擬似要素が「::」コロン二つなのはCSS2からCSS3になった際に擬似クラスと擬似要素の見分けをはっきりするために導入されたようです。
また、「::」はie8では解釈できないので使用する場合はie9以上。ie8も対応する場合は、「:」コロン一つにすること。

擬似要素の考察

W3Cの日本語訳ですと「擬似要素は文書ツリー上に、文書言語によって記された以上の抽象概念を生成する。」らしい。。

全くわかりません。。。

Web担当者Forumさんでは
「疑似要素」は、HTML（実際にはDOMツリー）内に、通常のHTMLでは指定できない「抽象的な要素」を作りだすものです。
と説明されています。さっきよりは少しわかるようなわからないような。

Webparkさんの「なぜ擬似要素という名称なのか」と言う考察と合わせると自分の中で少し理解できたきがするのでWebparkを参考に個人的にメモを残します。

擬似要素と擬似要素を使わずに同じような表示をした例。

::first-letter擬似要素を使わずに一文字目にスタイルを適用させたい場合、spanなど他の要素で囲むことでスタイルを囲む必要があります。なので、擬似要素はその要素を擬似的に要素を生成しているということなのかと思いました。

同様に::after擬似要素の例。
::afterはclearfixで良く使用されるのでそちらを例にすると、擬似要素を使用しないで再現しようとするとspanなど他の要素を入れる必要があります。なので、擬似要素は要素内の後ろに要素を擬似的に生成しているのかと思います。
上部の例はわかりやすいように形を表示しています。

擬似クラス(Pseudo-classes)の概要

擬似クラスは要素内全体に対してスタイルを適用する。

CSS3までで勧告されているの擬似クラスは数が多いので少しだけあげると

• :nth-child()
• :nth-of-type()
• :link
• :hover

などなど、他にも同じようなもの含め多数あります。

擬似クラスの考察

W3Cの日本語訳だと「擬似クラスは、文書ツリーの範囲外にある情報や、単体セレクタでは表現できないものを選択できるように導入された概念だ。」そうである。

Web担当フォーラムさんですと、
「疑似クラス」は、HTML外の要因による状態や、一般的なシンプルなセレクタでは指定できないものを指します。
とある。

私にはわかりません。

ということで、また擬似要素と同様にWebparkさんの「なぜ擬似クラスという名称なのか」と言う考察と合わせて個人的に考察。

擬似クラスと擬似クラスを使わずに同じような表示をした例。

リストの二番目を単純に赤くしたいとして、擬似クラスを使用しない場合は二番目のリストにクラスを追加しています。ということで、擬似クラスは擬似的にクラスを追加（生成）していると言うことなのかと思います。

個人的メモ

擬似要素はコロンを一つにすればIE8も対応。コロン二つはIE9以降対応。
擬似クラスは物によるが:nth-chidなどよく使うものはIE9以上。

参照ページ

記事にする際に参考にさせていただいたページ。