[CSS] 擬似クラス・擬似要素のまとめ

CSS3になりCSSでデザインできることが大幅に増えました。

「:before」と「:after」を使うと、今まで画像を使わなければならなかったデザインがCSSだけでできてしまったりします。

今回は擬似要素について詳しく調べてみました。

擬似クラス・擬似要素とは

CSS2までは擬似クラス・擬似要素と言っても「a:hover」「a:link」「a:visited」で使うぐらいだったのであまり意識することはありませんでした。CSS３からはかなり数が増えています。

擬似クラス・擬似要素の意味を確認してみます。

擬似クラス・擬似要素とは

疑似クラス（pseudo-classes）とは要素や属性などの文書構造だけでは特定できない “ある状況にある要素”を対象としてスタイルを適用するセレクタのことです。
例えば、最初の子要素やユーザーが操作中の要素などを対象にスタイルを適用することが可能になります。ユーザー操作による状況変化に対してスタイルを適用できるため、ウェブページに動的な効果を与えることが出来ます。

一方、擬似要素（pseudo-element）とは、要素や属性などの文書構造だけでは特定できない “要素の一部”を対象としてスタイルを適用するセレクタのことです。例えば、要素の一行目や一文字目にスタイルを指定したり、要素の前後にテキストや画像などを挿入することが出来ます。

擬似クラスと擬似要素の違いが分かりにくいですが、疑似クラスは要素全体が対象になるのに対して、疑似要素は要素の一部分だけが対象になる点が異なります。
引用：
HTMLクイックリファレンス　セレクタの種類

擬似クラスっていうのは「状態」と覚えておくと解りやすいですね。
「a:visited」「a:hover」など、訪問済みの状態、マウスオーバーされている状態などです。

擬似要素は要素の一部にスタイルを設定するものと覚えておきましょう。

擬似クラス・要素を使いこなせればデザインに富んだサイトが作れるようになります。

擬似クラス名	内容
:link	a要素のみ（訪問していないリンク）
:visited	a要素のみ（訪問済みのリンク）
:active	訪問済みのリンク
:hover	カーソルが上に乗っていて、アクティブではない要素
:focus	テキスト入力フィールドにフォーカスされている要素
:first-child	親要素に含まれる最初の子要素
:last-child	親要素に含まれる最後の子要素
:target	フラグメント識別子を持つURLでターゲット対象の要素
:enabled	要素が有効な時
:disabled	要素が無効な時
:checked	チェックボックス・ラジオボタンがチェックされている状態
:indeterminate	チェックボックス・ラジオボタンのチェックが不明なとき
:root	ドキュメントルート要素
:nth-child(n)	親要素に含まれるn番目の子要素
:nth-last-child(n)	親要素に含まれる最後からn番目の子要素
:nth-of-type(n)	親要素に含まれる同じ種類の要素のn番目の要素
:nth-last-of-type(n)	親要素に含まれる同じ種類の要素で最後からn番目の要素
:first-of-type	親要素に含まれる同じ種類の要素で最初の要素
:last-of-type	親要素に含まれる同じ種類の要素で最後の要素
:only-child	兄弟要素が無く、親要素の唯一の子要素
:only-of-type	同じ兄弟要素が一つも無い要素
:empty	子要素を持たない要素
:contains()	テキストの内容が与えられた部分文字列を含んでいる要素
:not()	否定要素