CSSにおける:before, :afterとか:hoverのことを擬似要素とか擬似クラスと言いますが、両者の違いは何なのかを調べてみました。
同じ意味でただ別の呼び方をしてるだけと思っていたのですが、両者には明確な違いがあったようです。
擬似クラス及び擬似要素の概念
擬似クラスおよび擬似要素がW3Cの公式文書によってどのように説明されてきたのかを確認していきます。
CSS2.1での説明
現在「勧告」となっている最新版、CSS2.1での説明をまずは確認してみましょう。
引用元：CSS 2.1 Specification 日本語訳 - 疑似要素と疑似クラス
原文：Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
CSSは、文書ツリーの外側にある情報に基づいた書式設定を可能にするために、疑似要素や疑似クラスの概念を導入する。
- 疑似要素は、文書言語によって指定された範囲を超えて、文書ツリーに関する抽象概念を作成する。（中略）また、疑似要素はスタイルシートの設計者がソース文書内で存在しないコンテンツにスタイルを割り当てる手段を提供してもよい（たとえば、:beforeおよび:after疑似要素が生成コンテンツにアクセスできる）。
- 疑似クラスは、要素の名前、属性またはコンテンツ以外の特徴で要素を分類する。その特徴は原則として、文書ツリーから推測できないものである。疑似クラスは、ユーザーが文書と対話する間、要素が疑似クラスを獲得したり喪失したりするという意味で、動的であってもよい。（中略）
と述べられており、続いて、
- 疑似要素も疑似クラスのいずれも文書ソースまたは文書ツリーに出現しない。
- 疑似クラスは、セレクタ内のどこにでも許可されるが、疑似要素はセレクタの最後の単体セレクタの後にのみ追加してもよい。
- 疑似要素および疑似クラスの名前は、大文字・小文字不区別である。
- 一部の疑似クラスは相互に排他的である一方、同じ要素に同時に適用可能なものもある。規則が競合する場合、通常のカスケード順序が結果を決定する。
とも説明されています。
擬似要素と擬似クラスの基本的な概念は、このCSS2.1から変わっていないので、参考になるかと思います。
CSS3(Selectors Level3)での説明
続いて、CSS3で擬似クラス・擬似要素を扱っているモジュール Selectors Level 3 (策定状況：CR) ではどう説明されているかを見てみます。
引用元：セレクタ Level 3
* この引用元は、2011年にすでに「勧告」となっていた「Selectors Level 3(旧)」を翻訳したものですが、最近なって「勧告候補」までレベルの下がった「Selectors Level 3(新)」が公開されています。内容に少し違いがあるかもしれないことをご了承ください。（大きな違いはないと思いますが...）
「Selectors Level 3 」では、擬似クラスと擬似要素の項がそれぞれ独立して書かれるようになっていますね。
擬似クラス
擬似クラスは、文書ツリーの範囲外にある情報や、単体セレクタでは表現できないものを選択できるように導入された概念。
擬似クラスは "コロン" (:) の直後に擬似クラス名を書いたものとして表される。擬似クラスには括弧で囲まれた値をとるものもあり、括弧は擬似クラス名の直後に記述する。
（中略）動的な擬似クラスもあり、ユーザーと文書のインタラクションに応じて擬似クラスが得られるもしくは失われることがある。
擬似クラスについては、上記のように説明されています。
CSS3(Selectors Level 3) からは擬似クラスの数も増え、擬似クラスの中での分類も増えています。
具体的に、以下のような分類分けがされています。
- 動的擬似クラス - 要素の名前、属性、内容以外という、一般に文書ツリーから導けない性質から要素を表す。
動的擬似クラスはさらに、未訪問のリンクを訪問済みのリンクと区別し表示するための「リンク擬似クラス」と、ユーザーの行動に応じて描画を変更する「ユーザーアクション擬似クラス」に分類される。 - ターゲット擬似クラス - 文書の URI がフラグメント識別子を持つ場合の、ターゲット要素を表す。
- 言語疑似クラス - 要素が持つ言語情報から要素を表す。
- UI要素状態擬似クラス - UI要素の状態によって要素を表す。
- 構造擬似クラス - 文書ツリー内の情報のうち、他の単体セレクタや結合子では表現できない要素を表す。
- 否定擬似クラス - 否定擬似クラスは引数内の要素で表されない要素を表す。(否定擬似クラス :not(X) は関数表記をとり、単体セレクタを引数にとる。(ただし、否定擬似クラスを入れ子にすることはできない。)
擬似要素
擬似要素は文書ツリー上に、文書言語によって記された以上の抽象概念を生成する。たとえば、文書言語は要素内容において、最初の文字や最初の行にアクセスする手段を提供しない。擬似要素によって、これら本来はアクセスすることのできない情報を扱えるようになる。擬似要素は元文書に存在しない内容を参照する方法も提供する (例: ::before, ::after 擬似要素)。
擬似要素は擬似要素名の前に2つのコロン (::) を記述し表される。
:: 記法は擬似クラスと擬似要素の区別をつけるために、セレクタ Level 3より導入された。現在のスタイルシートとの互換性のため、UA は CSS1, CSS2 で導入された、コロン1つの記法で表される擬似要素 (:first-line, :first-letter, :before, :after) も受け付けなければならない。
擬似要素についてのCSS2.1からの大きな変更点は、擬似要素はコロンが2つ（::）で表されるようになったことでしょう。
しかし、CSS2.1までのコロン1つでの記法にもまだ対応しているため、:beforeや::beforeのような２種類の表記が混在してしまっているのが現状です。後者がこれからのスタンダードな書き方なようですね。
擬似クラス・擬似要素の種類一覧
CSS3(Selectors Level 3)時点での擬似クラス・擬似要素を一覧にしてまとめていきます。
擬似クラス
- 動的擬似クラス
- リンク擬似クラス
:link
:visited
ユーザーアクション擬似クラス
:hover
:active
:focus - ターゲット擬似クラス
- :target
- 言語疑似クラス
- :lang
- UI要素状態擬似クラス
- :enabled
:disabled
:checked
:indeterminate - 構造擬似クラス
- :root
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
:first-child
:last-child
:first-of-type
:last-of-type
:only-child
:only-of-type
:empty - 否定擬似クラス
- :not(X)
擬似要素
- ::first-line
::first-letter
::before
::after
おわりに
ただの別名だと思っていたのですが、明確に分けられていたことがわかりました。
また、擬似クラスでもさらに細かく分類分けがされていて、知らないことがまだまだ多いなぁと実感。
擬似要素・擬似クラスの概念から確認しておくことで、これからさらに追加された場合も、混乱せずにすぐにしっくりきそうです。
また、CSSのこれまでの歴史や、現状のモジュール制などについても詳しく調べてみたので、是非とも、合わせてご覧ください。
