疑似クラスと疑似要素とは？

疑似クラスって何？

CSSでは未訪問の状態にあるリンク、訪問済みの状態にあるリンク、マウスがリンクに合わせたときの状態にあるリンクなどのデザインを指定することができます。このように要素が特定の状態にある場合を表すのが疑似クラスです。

CSSでは要素の一文字目、要素の一行目などのデザインを指定することができます。このように要素内の特定の文字や行を要素とみなしたものが疑似要素です。

疑似クラスと疑似要素の種類をまとめました。

項目	種類	スタイルを指定できる内容
疑似クラス	link 疑似クラス	未訪問のリンク。
	visited 疑似クラス	訪問済みのリンク。
	hover 疑似クラス	マウスポインタを要素に合わせたとき。
	active 疑似クラス	アクティブ状態になったとき。（たいていの場合はマウスボタンが押されたとき）
	focus 疑似クラス	フォーカス（テキストを入力できる状態）があったとき。
	first-child 疑似クラス	指定の要素が他の要素の最初の子要素である場合。
	lang 疑似クラス	要素が何語で記述されているかによってデザインの変更できる。
疑似要素	first-letter 疑似要素	要素の一文字目のデザインの変更。
	first-line 疑似要素	要素の一行目のデザインの変更。
	before 疑似要素	指定の要素の前に仮想的な文字列や画像を入れる。
	after 疑似要素	指定の要素の後に仮想的な文字列や画像を入れる。

疑似クラスと疑似要素の記述方法はセレクタの後に「:」を付け、その後に疑似クラスや疑似要素を記述します。例えば a 要素に href 属性を指定したリンクの未訪問の状態のスタイルを変更するには link 疑似クラスを使います。このときの記述例はこのようになります。

記述例
a:link { color: red;}

これで未訪問の状態のリンクの文字色を赤色に指定できました。難しく考える必要はありません。疑似クラスや疑似要素（記述例では link）の前に「:」を付けるだけです。

a 要素に疑似クラスを付ける場合は、並べる順序が決まっています。「link」、「visited」、「hover」、「active」の順序で指定しましょう。この順序を無視すると、疑似クラスの中で効果が現れないものが出る場合があります。

ゼロから始めよう！わかりやすい！ホームページ作成ガイド