before、after などの疑似要素って何?

もやは使わないときはないんじゃないかというくらいCSSの設定にかかせない「疑似要素」。疑似要素と似た記述に「疑似クラス」なるものもあります。この記事では本格的なCSSの設定の前に「疑似要素」「疑似クラス」について、確認したいと思います。

  1. 「::before」「::after」と「:before」「:after」の違いって何?
  2. 疑似クラスってなに?
  3. 疑似要素の代表格「::before」「::after」

この記事は「2020年12月22日」に書かれた記事です

1.「::before」「::after」と「:before」「:after」の違いって何?

「::before」「::after」と
「:before」「:after」のように、コロン(:)が1つのものと、2つのものが書かれている設定を見たことがありませんか?

また、「:hover」「:active」のように(:)が1つの記述はほかにもあります。特に把握していなくても感覚的にコーディングはできてしまいますが、ざっくりと確認しておきましょう。

「::before」「::after」と「:before」「:after」の違い

  • CSS2で使用する記述=(:)が1つの「:before」「:after」
  • CSS3で使用する記述=(:)が2つの「::before」「::after」となります。

書き方が異なりますが内容は同じです。
現在ホームページを制作するときは、CSS3を使用するため、「::before」「::after」を使っている人の方が多いのではないでしょうか。

「:before」「:after」を使う場合はどんな時?

CSS3になる以前のCSS2では、「:before」「:after」という表記を使っていました。IE8など(もういいでしょと思うこのブラウザでは)「::before」「::after」は使用できず「:before」「:after」でないと動きません。そのため古いブラウザ等を意識した場合、(:)が1つの記述「:before」「:after」を使います。

※CSS2とCSS3には互換性があるのでCSS3を使用していても、CSS2時代の「:before」「:after」でも動作します。

じゃあ、「:before」「:after」の方がいいの?

と思いますが、個人的には代表的な各ブラウザ(Microsoft Edge, Firefox, Chrome, Safari, Opera)のCSS3への対応は進んでいるので「::before」「::after」でよいのではないかと思います。

ただし、自分のホームページであれば割り切ることができますが、ホームページ制作会社で働く場合やホームページ制作を請け負う場合は、どのブラウザーまで表示できることを保証するかによって、選択する必要があります。

疑似要素に限ったことではなく、制作物として請け負う場合、決められたブラウザへの対応が必要となります。

2.疑似クラスってなに?

「:hover」「:active」などの疑似クラスも「:before」「:after」(「: :before」「: :after」)と同様に(:)を使った記述ですが、「:before」「:after」の仲間ではありません。

疑似要素と疑似クラスの違い

CSS2の時代、
「:before」「:after」
「:hover」「:active」

と同じ(:)1つの表記で分かりにくかったため、CSS3の規格が登場した際、疑似要素と疑似クラスを識別するため、「before」「after」などの疑似要素の方に(:)を2つつける仕様に変更されました。

疑似要素(「: :before」「: :after」など)が要素の一部に対して擬似的にスタイルを適用するのに対し、疑似クラス指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。

代表的な疑似クラスには、下記のものがあります。
  • :nth-child()
  • :nth-last-child()
  • :nth-of-type()
  • :nth-last-of-type()
  • a:link(未訪問)
  • a:vesited(訪問済み)
  • a:hover(ホバーしたときに有効)
  • a:focus(clickしてからマウスを話した後も、他の要素を選択するまで有効)
  • a:active(clickしている間有効)
疑似クラスは順番も大切です。
a:hoverの指定を a:activeの後に記述するとactiveが無効になってしまうなどの不具合が起こります。
上記順番で記述しましょう

3.疑似要素の代表格「::before」「::after」

なんといっても重要な特性は、HTMLにコーディングに手を加えることなく装飾を適用することができることではないでしょうか。ちょっとした装飾をするために<div>の入れ子にしたり、無理やりタグを尽かしたりしなくてよいので非常に助かります。

代表的なの疑似要素は下記の2つです。

  • 「::before」要素の直前に内容を追加することができる
  • 「::after」要素の直後に内容を追加することができる

※具体的な使い方については、このあとの記事で登場します。

松江ブログ(M2エムツー)

HOME > ホームページ制作 > CSSでホームページを1UP > before、after などの疑似要素って何?

ページトップへ