CSSの疑似要素、疑似クラスとは

特定の条件下や特定の部分にのみスタイルを適用するなど、CSSによる表現の幅を大きく広げてくれるのが疑似要素、疑似クラスです。この記事では疑似要素、疑似クラスそれぞれにどんなものがあり、どのような表現ができるのかを簡単にご紹介します。

疑似クラスとは

擬似クラスは特定の場合にのみそのスタイルを適用することができるCSSの記述です。「なんのこっちゃ？」という方でも下記の記述を見たことがある方、中には使ったことがある方もいるのではないでしょうか。

a:hover {
	color: #0f3647;
}
a:visited {
	color: #9f9f9f;
}

この「a:hover」や「a:visited」というのが擬似クラスで、例えば「a:hover」はリンクにマウスカーソルを合わせた時のみスタイルが適用され、「a:visited」は訪問したことのあるリンク先のみスタイルが適用されます。

疑似クラスの種類

擬似クラスには様々なものがあります。ブラウザによっては対応していないものもありますので、使用する際はご注意下さい。

Eは要素（a:hoverでいうa）を表しています。

CSS2

セレクタ名	パターン	簡単な説明
リンク擬似クラス	E:link	未訪問の要素に適用
	E:visited	訪問済みの要素に適用
ダイナミック擬似クラス	E:active	ユーザーが要素をクリックしいる間に適用
	E:hover	ユーザーが要素にカーソルを重ねたときに適用
	E:focus	ユーザーが要素にフォーカスしている場合に適用
言語擬似クラス	E:lang(ja)	指定した言語の要素に適用。この場合はja(日本語)
:first-child疑似クラス	E:first-child	要素内の最初の要素に適用

CSS3

間接セレクタ	E ~ F	要素Eの後に出現するFという要素に適用
属性セレクタ	E[foo^=”bar”]	fooの属性値がbarと前方一致する要素に適用
	E[foo$=”bar”]	fooの属性値がbarと後方一致する要素に適用
	E[foo*=”bar”]	fooの属性値がbarと部分一致する要素に適用
:root疑似クラス	E:root	文書のルートに適用
:last-child疑似クラス	E:last-child	ある要素内の最後の要素に適用
:nth-child()疑似クラス	E:nth-child(n)	ある要素内の隣接している要素のうち、最初から数えてn番目の要素に適用
:nth-last-child()疑似クラス	E:nth-last-child(n)	ある要素内の隣接している要素のうち、最後から数えてn番目の要素に適用
:first-of-type疑似クラス	E:first-of-type	兄弟関係にあたる要素のうち、最初の要素に適用
:last-of-type疑似クラス	E:last-of-type	兄弟関係にあたる要素のうち、最後の要素に適用
:nth-of-type()疑似クラス	E:nth-of-type(n)	兄弟関係の要素のうち、最初から数えてn番目の要素に適用
:nth-last-of-type()疑似クラス	E:nth-last-of-type(n)	兄弟関係の要素のうち、最後から数えてn番目の要素に適用
:only-child疑似クラス	E:only-child	ある要素内の子要素がE要素のみの場合に適用
:only-of-type疑似クラス	E:only-of-type	ある要素内で唯一のE要素に適用
:empty疑似クラス	E:empty	要素Eが空の場合に適用
ターゲット擬似クラス	E:target	アンカーリンクで飛んだ先のE要素に適用
UI要素状態擬似クラス	E:enabled	有効にされているUI要素のE要素に適用
	E:disabled	無効にされているUI要素のE要素に適用
UI要素状態擬似クラス	E:checked	チェックボックスなどがチェックされた時に適用
否定擬似クラス	E:not(s)	Eという要素のうち、sでないものに適用

疑似要素とは

擬似要素は要素の一部にのみスタイルを適用したり、文字や画像を追加することができるCSSの記述です。前回の記事で三角形を描く際に使用したのもこの擬似要素の一つでした。

疑似要素の種類

擬似クラスと違って擬似要素は4種類しかありませんが、知っておくとなにかと便利です。

Eは要素（a:hoverでいうa）を表しています。

セレクタ名	パターン	簡単な説明
:first-line疑似要素	E:first-line	要素の最初の一行にのみ適用
:first-letter疑似要素	E:first-letter	要素の最初の一文字のみに適用
:before疑似要素	E:before	要素の前に内容を生成し、スタイルを適用
:after疑似要素	E:after	要素の後に内容を生成し、スタイルを適用