Web制作を行う全ての方へ

CSSの疑似要素と疑似クラスの違いを明確に

ちょっとわかりづらい疑似要素と疑似クラスの違いについてまとめました。

疑似要素、疑似クラスの記述は、css2までは:beforeのようにコロンが一つだったのですが、css3になってから、疑似要素は::beforeというようにコロンを2つつけるようになり、疑似要素と疑似クラスを識別するようになりました。(疑似クラスは以前と同じく:は一つで記述します。)

疑似要素と疑似クラスはぱっと見て違いがわかりづらいですよね。分けるとこのようになります。

疑似要素

文章の1文字目、1行目など、要素の一部に対して影響を与える事ができるのが疑似要素になります。前述の通り:(コロン)は2つつけます。

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

例えば

pseudo_02_01

とすれば、指定した要素の最初の文字だけ、色が変わるので、要素の一部に対して影響をあたえるということになります。

疑似クラス

一方、疑似クラスは指定したもの全体に影響を与えるもので、文書構造の範囲外にある情報や単体セレクタで表現できないものを選択するために導入された概念です。
(マウスホバー時とかは文書構造の範囲外ですし、単体セレクタだけでは取れないですよね。)

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

こちらも例を用いると

pseudo_02_02

このように、指定した要素全てに対して影響をあたえるようになります。

指定方法

スタイルを定義する際は下記のようになります。

  • li::before
  • li:last-child
  • li:last-child::before (疑似クラスが前、疑似要素が後)

対応ブラウザについて

これまで疑似要素のコロンを2つにするとIE8で対応出来ていなかったのですが、2016年1 月 12 日 (米国時間) より、使用しているOSでサポートしている最新バージョンの IEだけが、技術サポートとセキュリティ アップデートを受けられるようになるため、実質IE8の対応を考える必要が無くなります。

詳しくはInternet Explorer サポートポリシー変更の重要なお知らせをご参照ください。

使い方

このブログではヘッダーメニューの”|”で活用しています。

pseudo_01
li::before{
    content: "| ";
    display: inline;
}
li:last-child::after{
    content:" |";
    display:inline;
}

最後に

最近の話ではないですが、疑似要素、疑似クラスが登場してから、コーディングで出来ることの幅が凄く広がった!という印象があります。

登場してからかなり経つのに、我ながら今更感のある記事でもあるんですが、こうやってまとめておくことでしっかり頭にも入るので、やっぱり書きたいことを書くのが良いですね。

参考文献

今回の記事を書くにあたり、下記サイトを参考にさせていただきました。

お役に立てたらお願いします🙇

Kyashで送金する

Ad



Share