「疑似クラス」という名前はなんとなく聞いたことがあっても、実際どんなものなのかをしっかりと理解して使っている方は少ないのではないでしょうか。
今回はこの「疑似クラス」についてご紹介します。
疑似クラスとは
CSSにおける疑似クラスはセレクタに付加するキーワードのことで、選択される要素の特定の状態のスタイルを指定するものです。
例えば、「a:hover{}」はよく見かけるのではないでしょうか。「:hover」の部分が疑似クラスです。これは、選択された「a」の要素にカーソルがあわさった（特定の状態）ときのスタイルを指定するということを表しています。同じ「a」要素でも条件によって別のCSSを指定することができるようになります。
よく使用される疑似クラス
「:link」疑似クラス
|
1 2 3 |
a:link{ color: blue; } |
「:link」疑似クラスは、未訪問のリンクのスタイルを指定します。上記の記述では、未訪問のリンクの文字色を青に指定しました。
「:visited」疑似クラス
|
1 2 3 |
a:visited{ color: purple; } |
「:visited」疑似クラスは、訪問済みのリンクのスタイルを指定します。上記の記述では、訪問済みのリンクの文字色を紫に指定しました。
「:hover」疑似クラス
|
1 2 3 |
a:hover{ color: red; } |
「:hover」疑似クラスは、カーソルがあわさっているときのスタイルを指定します。上記の記述では、カーソルがあわさっているリンクの文字色を赤に指定しました。
「:active」疑似クラス
|
1 2 3 |
a：active{ color: orange; } |
「:active」疑似クラスは、クリック中の要素のスタイルを指定します。上記の記述では、クリック中のリンクの文字色をオレンジに指定しました。
これらは、a要素のリンクテキストの変化がわかりやすくなるように使用したことがある人も多いのではないでしょうか。CSSでは後に記述されたものを優先するルールがあるので、指定する順番にも注意しましょう。基本的には、今回紹介した順番と同じで問題ありません。
その他の疑似クラス
「:focus」疑似クラス
|
1 2 3 |
input:focus{ background-color: lightblue; } |
「:focus」疑似クラスは、フォーカスされた要素のスタイルを指定します。上記の記述では、フォームにテキスト入力できる状態の要素の背景色を水色に指定しました。
「:first-child」,「:nth-child(n)」疑似クラス
|
1 2 3 |
p:first-child{ color:red; } |
「:first-child」疑似クラスは、要素内の最初の子要素のスタイルを指定します。上記の記述では、一番目のp要素の文字色を赤に指定しました。
|
1 2 3 |
p:nth-child(3){ color: green; } |
「nth-child(n)」疑似クラスは、要素内のn番目の子要素のスタイルを指定します。上記の記述では、３段落目のp要素の文字色を緑に指定しました。
「:first-child」と「:nth-child(1)」は同じ意味になります。
「:lang()」疑似クラス
|
1 2 3 |
p:lang(en){ color: blue; } |
「:lang(en)」疑似クラスは、特定の言語のスタイルを指定します。上記の記述では、、英語（en）の文字色を青に指定しました。
