CSSの::afterと:after コロンの数の違いは？ 疑似要素とクラスとは

今日は、Webの現場寄りに、CSSの話を。セレクタで「:after」と「::after」がありますが、どちらが正しいのでしょうか。そもそも、「疑似クラス」や「疑似要素」とはどういうものなのでしょうか。

CSSセレクタにはいろいろありますが、「::after」「::before」という書き方と、「:after」「:before」という書き方があります。

昔からCSSに触っている人は、「え？ コロンが2つって何？」となると思います。使い慣れた「:after」と今の「::after」は何が違うのでしょうか。

疑似クラスは「:」、疑似要素は「::」

CSS3では、次のようにされています。

• 「疑似クラス」は「:hover」のようにコロン1つで書く
• 「疑似要素」は「::after」のようにコロン2つで書く

昔はどちらもコロン1つで書いていたのですが、CSS3でこの2つが区別できるように分けられました。古い人になじみがないのも当たり前ですね。

とはいうものの、昔に書かれていたCSSでは疑似要素もコロン1つで指定されていますので、昔から使われている疑似要素は、コロン1つで指定されていても、対応してくれるようです（:after、:before、:first-line、:first-letter）。

まぁ、新たに書く場合に気にするようにするのと、解説などでコロンが2つ書かれていても気にせず納得するようにしましょう。

とはいうものの、「疑似クラス」とか「疑似要素」って何が違うのでしょうか。

疑似クラスはシンプルな状態、けっこう自由に使える

「疑似クラス」は、HTML外の要因による状態や、一般的なシンプルなセレクタでは指定できないものを指します。

ふつうにHTMLでタグに付ける「クラス」の延長のようなものととらえるとわかりやすいでしょう。

• :link
• :visited
• :hover
• :active
• :focus
• :target
• :lang()
• :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()

:hoverや:activeなど、ユーザーの行動やブラウザに記録された状態によって、同じHTMLでも状態が変わるものもあります。

1つの要素にクラス名を付けられるように、疑似クラスも複数の状態をもっていることがあり、たとえば:checked:focusのように複数の疑似クラスを指定できます（同時に指定しても意味のないものもありますが）。

また、疑似クラスはセレクタのなかでどこにでも指定できます。

• 参考：http://standards.mitsue.co.jp/resources/w3c/TR/css3-selectors/#pseudo-classes

疑似要素は抽象的な要素、利用には制限がある

「疑似要素」は、HTML（実際にはDOMツリー）内に、通常のHTMLでは指定できない「抽象的な要素」を作りだすものです。

わかりやすく言うと、<p>や<div>のようなタグ（これを「要素」と呼びます）の延長のようなものですね。要素の一部分を独立した要素として扱ったり（::first-letterなど）、実際には存在しない要素作り出したり（::beforeや::after）できます。

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

現在の仕様では、1つのセレクタに疑似要素は1つしか指定できません。また、セレクタ内で原則として最後に指定します。

• 参考：http://standards.mitsue.co.jp/resources/w3c/TR/css3-selectors/#pseudo-elements

いかがでしょうか。「:」が1つと2つの違い、疑似クラスと疑似要素の違いがわかりましたでしょうか。

ちなみに、すでにCSSセレクタ4の仕様策定が（かなり前に）始まっていて、親子構造を指定したうえで最も下位の要素以外を選ぶセレクタなど、だれもが一度はやりたいと思ったけれどもCSS3まではできなかった指定などが含まれています。

早くセレクタ4が実用になるといいですね。