ちょっとわかりづらい疑似要素と疑似クラスの違いについてまとめました。
疑似要素、疑似クラスの記述は、css2までは:beforeのようにコロンが一つだったのですが、css3になってから、疑似要素は::beforeというようにコロンを２つつけるようになり、疑似要素と疑似クラスを識別するようになりました。（疑似クラスは以前と同じく:は一つで記述します。）
疑似要素と疑似クラスはぱっと見て違いがわかりづらいですよね。分けるとこのようになります。
疑似要素
文章の１文字目、１行目など、要素の一部に対して影響を与える事ができるのが疑似要素になります。前述の通り：（コロン）は２つつけます。
- ::before
- ::after
- ::first-letter
- ::first-line
- ::selection
例えば
とすれば、指定した要素の最初の文字だけ、色が変わるので、要素の一部に対して影響をあたえるということになります。
疑似クラス
一方、疑似クラスは指定したもの全体に影響を与えるもので、文書構造の範囲外にある情報や単体セレクタで表現できないものを選択するために導入された概念です。
（マウスホバー時とかは文書構造の範囲外ですし、単体セレクタだけでは取れないですよね。）
- :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
こちらも例を用いると
このように、指定した要素全てに対して影響をあたえるようになります。
指定方法
スタイルを定義する際は下記のようになります。
- li::before
- li:last-child
- li:last-child::before （疑似クラスが前、疑似要素が後）
対応ブラウザについて
これまで疑似要素のコロンを２つにするとIE8で対応出来ていなかったのですが、2016年1 月 12 日 (米国時間) より、使用しているOSでサポートしている最新バージョンの IEだけが、技術サポートとセキュリティ アップデートを受けられるようになるため、実質IE8の対応を考える必要が無くなります。
詳しくはInternet Explorer サポートポリシー変更の重要なお知らせをご参照ください。
使い方
このブログではヘッダーメニューの”｜”で活用しています。
li::before{
content: "| ";
display: inline;
}
li:last-child::after{
content:" |";
display:inline;
}
最後に
最近の話ではないですが、疑似要素、疑似クラスが登場してから、コーディングで出来ることの幅が凄く広がった！という印象があります。
登場してからかなり経つのに、我ながら今更感のある記事でもあるんですが、こうやってまとめておくことでしっかり頭にも入るので、やっぱり書きたいことを書くのが良いですね。
参考文献
今回の記事を書くにあたり、下記サイトを参考にさせていただきました。
- セレクタ Level 3 W3C
- [CSS]擬似要素の実用的な使用用途のまとめ WEBCRE8
- セレクタ CSS HappyLife ZERO
- 擬似クラスと擬似要素を複数指定する方法
お役に立てたらお願いします🙇
Comments