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

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 要素の後に内容を生成し、スタイルを適用

擬似要素につけるコロンの数

そもそもこの記事を書くきっかけとなったのは前回の記事、画像を使わずにCSSだけで三角形を表示する方法で三角形を実装している途中。

一つだと思っていた擬似要素:afterのコロン(:)が、デベロッパーツールで確認すると::afterとコロン2つで表示されていたので「あれ?2つつけるのが正しいの?」となり詳しく調べてみることに。

これはCSSのバージョンによる違いで、CSS2までは擬似要素も擬似クラスもコロン2つだったのが、CSS3で擬似クラスが増えたためなのか、擬似要素はコロンが2つ、擬似クラスはコロンが1つと、区別しやすくなったみたいです。

ただし、IE8がコロン2つの書き方には対応していないので、IE8のシェアがそれなりにあるうちはコロン2つの書き方はやめておいた方が無難なようです。

このエントリーをはてなブックマークに追加

CSSの疑似要素、疑似クラスとは」への2件のフィードバック

コメントを残す

頂いたコメントは一読した後表示させて頂いております。
反映まで数日かかる場合もございますがご了承下さい。