CSSの擬似クラス
擬似クラスとは、指定された要素が特定の状態である場合にスタイルを指定するものです。たとえば、「:hover」という擬似クラスを利用すると、指定した要素の上にカーソルがある状態のときにだけスタイルを適用することができます。
擬似クラスは擬似要素と似ていますが、擬似要素は特定の文字や行など要素内の一部にスタイルを指定するのに対して、擬似クラスでは指定した要素が特定の状態であるときのスタイルを指定します。
擬似クラスの基本的な使い方
擬似クラスを使う場合は、スタイルを適用したい要素の後に「:」（コロンを１つ）付けて、その後に擬似クラス名を記入します。擬似要素はコロンを２つ付けますが、擬似クラスではコロン１つなので注意してください。
たとえば、「sample」というクラスに対して擬似クラスの「:hover」を利用するときには、CSSに次のように記入します。
/* 通常時のスタイルを指定 */
.sample {
font-size: 16px;
color: #1a0dab;
}
/* カーソルがホバーされたときのスタイルを指定 */
.sample:hover {
opacity: 0.8;
}擬似クラスの種類と使用例
主な擬似クラスには次のようなものがあります。
:hover
指定した要素にマウスがホバーしたときにスタイルを適用します。
たとえば、リンク（a要素）の上にカーソルが置かれたときに、文字色を変えてアンダーラインを表示するには次のように記入します。
/* 通常時のスタイル */
a {
color: #1a0dab;
text-decoration: none;
}
/* マウスがホバーしたときのスタイル */
a:hover {
color: #0090ff;
text-decoration: underline
}表示例
:active
指定した要素がアクティブな状態であるときのスタイルを適用します。アクティブな状態とは、マウスをクリックしてから離すまでの状態を指します。
たとえば、リンク（a要素）がクリックされているときだけフォントサイズを200%にして背景色を緑色にするにCSSに次のように記入します。
/* リンクをクリックされている時のスタイル */
a:active {
font-size: 200%;
padding: 16px;
background-color: green;
}表示例
「:hover」と「:active」の注意点
スマートフォンでは「:hover」や「:active」の状態に切り替わるタイミングはパソコンよりも遅くなります。そのため、指定されている内容が反映されるよりも先にリンク先のページに移動してしまうことが多くなります。
スマートフォン向けのページで「:hover」や「:active」を使用した場合はパソコンで表示された場合と結果が異なることに注意してください。
:link と :visited
「:link」は、サイト内にあるリンクのうち未訪問のリンクに対してスタイルを適用します。また、「:visited」は訪問済みのリンクに対してスタイルを適用します。
たとえば、サイト内に貼られたリンクのうち未訪問のリンクは青色、訪問済みにリンクは赤色で表示する場合はCSSに次のように記入します。
/* 未訪問のリンク */
a:link {
color: blue;
}
/* 訪問済みのリンク */
a:visited {
color: red;
}表示例
:nth-child(n)
リスト要素など、同じ要素が連続するときにn番目の要素に対してスタイルを適用します。
カッコ内の引数には、整数のほかキーワード値や関数表記で記述することができます。
キーワード値
奇数：odd
偶数：even
関数表記
An＋B
たとえば、li要素のうち奇数行は赤、偶数行は緑で表示するにはCSSに次のように記述します。
/* 奇数行の指定 */
li:nth-child(odd) {
color: red;
}
/* 偶数行の指定 */
li:nth-child(even) {
color: green;
}表示例
- リスト表示
- リスト表示
- リスト表示
- リスト表示
- リスト表示
そのほかの擬似クラス
ここで紹介した擬似クラス以外にもCSSには多くの擬似クラスが用意されています。擬似クラスの一覧はMozillaの公式サイトである「MDN Web Docs」で見ることができます。
