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

最後に

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

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

参考文献

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

Ad



Comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です