CSSの疑似クラスと疑似要素、:と::の違い

CSSで疑似クラス、または疑似要素を使用する時に、:と::のどっちだっけ？ と迷ったことはありませんか？

:beforeと::beforeのどっちだっけ？ :notと::notのどっち？ :と::のどっちが疑似クラスだっけ？
※CSS3では::beforeですが、CSS2では:beforeでした。

たまに迷ってしまうことがある人に、CSSの疑似クラスと疑似要素、:と::の違いについて紹介します。

What's the difference between : and :: in CSS?
by Salma Alam-Naylor(@whitep4nth3r)

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• CSSの「疑似」とはどういう意味か
• 疑似クラスとは
• 疑似要素とは

はじめに

「CSS :と::の違い」をGoogleで検索してから、その情報が頭の中にとどまるまでに何年もかかりました。もうすでにお馴染みですか？ もしそうでなければ、この記事はあなたのお役に立てるかもしれません。

お急ぎの方に、簡単な答えを書いておきます。

• :は疑似クラス用で、:visited, :hoverなどがあります。
• ::は擬似要素用で、::before, ::afterなどがあります。

【訳者注】
一部の疑似要素（::before, ::after, ::first-letter, ::first-line）は:でも下位互換性によりブラウザで動作します。

さらに詳しい解説が必要な場合は、このままお進みください。

CSSの「疑似」とはどういう意味か

「疑似（pseudo）」という言葉の英語の定義は、「偽物」「本物ではない」です。では、いったい擬似クラスや擬似要素とは何を意味するのでしょうか？

擬似クラスや擬似要素は、HTMLに手動で書き込むのではなく、DOM（ドキュメントツリー）にも現れませんが、代わりにCSSによって生成されるものです。

疑似クラスとは

疑似クラス（pseudo-class）は、ユーザーの操作やブラウザに保存されている情報などをページに記述されたHTML以外の情報に基づいて、CSSで要素を選択できるようにするものです。疑似クラスはシングルコロン（:）の後に疑似クラス名をつけてアクセスします。

疑似クラスを使用すると、状態に基づいて要素のスタイルを設定できます。ページ上でアクセスしたことのあるリンクが別の色で表示されているのを見たことがあると思います。これは、CSSでアンカータグ（a）の:visited疑似クラスをターゲットにしてスタイルを設定することで実現されます。

この:visitedの挙動はGoogleの検索ページで見ることができます。Googleにアクセスし、アクセスしたことがあるキーワードを検索してみてください。デベロッパーツールを開き、エレメントパネルでその要素をクリックすると、スタイルペインでa:visitedセレクタが見つかります。

Googleに使用されているa:visited疑似クラス

疑似クラスは、アクセスしたことがあるリンク（訪問済みリンク）などのブラウザ情報の影響を受けるだけでなく、ページ上でユーザーが要素にカーソルを合わせたり、フォーカスを当たるなどの操作にも影響を受けます。
たとえば、Googleの検索ページには:hover疑似クラスも設定されています。

このCSSはリンクをホバーすると、下線を表示します。

Googleに使用されている:hover疑似クラス

CSSでターゲットにできるさまざまな種類の擬似クラスについては、MDNにある豊富なドキュメントを参照ください。

疑似要素とは

疑似要素（pseudo-element）は、DOM要素の特定の部分にCSSでスタイルを設定できるようにするものです。疑似要素はダブルコロン（::）の後に疑似要素名をつけてアクセスします。疑似クラスとは異なり、疑似要素はその状態に応じて要素をスタイルするためには使用できません。

疑似要素の例をいくつか紹介します。
記事ベースのWebサイトでは印刷業界の慣習にあるドロップキャップを使用し、テキストブロックの1文字目を大きな文字で表示することがあります。これは、CSSの::first-letter疑似要素をターゲットにすることで実現することができます。

たとえば、私のブログ記事でドロップキャップがどのように表示されるか、視覚的な例をご覧ください。

ブログ記事に使用されている::first-letter疑似要素

また、::first-line疑似要素を使用して、最初の行をターゲットにすることもできます。

CSS内で使用できる一般的な擬似要素セレクタには、次のものがあります。

• ::before
• ::after
• ::section
• ::placeholder
• ::marker

CSSでターゲットにできるさまざまな種類の擬似要素については、MDNにある豊富なドキュメントを参照ください。

これで、終了です！
CSSの:と::の違いについて検索するのはこれで最後になりますように。