CSS

CSS pseudo-classes are a mechanism for applying styles based on the state or position of elements, allowing, for example, the application of styles to only the even-numbered list items.

pseudo-class（疑似クラス）

　CSSの疑似クラスは、HTML要素に特定の状態がある場合にスタイルを適用するためのものです。疑似クラスは、コロン（:）で始まり、要素のセレクタの後に付加されます。

　以下は一般的な疑似クラスの例です。

:hover: ユーザーがマウスカーソルを要素の上に移動したときに適用されます。
:active: ユーザーが要素をクリックしている間に適用されます。
:focus: 要素がフォーカスされているときに適用されます。
:first-child: 要素が親要素の最初の子要素である場合に適用されます。
:last-child: 要素が親要素の最後の子要素である場合に適用されます。
:nth-child(): 指定された式に一致する子要素に適用されます。
:not(): 指定されたセレクタに一致しない要素に適用されます。
:checked: ラジオボタンやチェックボックスの選択状態に適用されます。

　これらの疑似クラスは、特定の要素の状態に応じてスタイルを変更するのに便利です。たとえば、ユーザーがマウスカーソルを移動すると、要素の背景色を変更することができます。また、フォーム要素には、:checked疑似クラスを使用して、選択されたラジオボタンやチェックボックスのスタイルを変更することができます。

　また、疑似クラスはセレクタと組み合わせて使用することもできます。たとえば、以下のような CSSコードは、リンクがクリックされたときに色を変更することができます。

CSS

a:link { color: blue; } /* 未訪問のリンク */
a:visited { color: purple; } /* 訪問済みのリンク */
a:hover { color: red; } /* マウスカーソルがリンク上にある時 */
a:active { color: green; } /* リンクがクリックされた時 */

　疑似クラスは、要素の特定の状態に応じてスタイルを変更するために使用されますが、疑似要素と混同しないように注意する必要があります。疑似要素は、HTMLに存在しない要素を作成し、それにスタイルを適用することができます。例えば、以下のCSSコードは、段落要素の最初の行にスタイルを適用します。

CSS

p::first-line {
	font-weight: bold;
	font-size: 120%;
}

　さらに、疑似クラスは、階層構造を持つ HTML文書でのスタイル適用に役立ちます。以下は、階層構造を持つ HTML文書で、親要素とその子要素に対して異なるスタイルを適用する例です。

CSS

ul li {
	/* 親要素がul、子要素がli */
	list-style-type: none; /* 箇条書きのマーカーを非表示にする */
}

ul li:first-child {
	/* 最初のli要素にだけ適用するスタイル */
	font-weight: bold;
}

　このコードは、ul要素の直下にある li要素のマーカーを非表示にし、最初の li要素には太字のスタイルを適用します。疑似クラスを使用することで、階層構造を持つ HTML文書の特定の要素に対してスタイルを適用することができます。

　さらに、疑似クラスには、nth-child、nth-of-type、nth-last-child、nth-last-of-typeなどの種類があります。これらは、要素の位置に基づいてスタイルを適用するために使用されます。例えば、以下のような CSSコードは、偶数番目のリストアイテムにスタイルを適用します。

CSS

li:nth-child(even) {
	background-color: #f2f2f2;
}

　このコードは、li要素の偶数番目の要素に背景色を設定します。nth-child疑似クラスを使用することで、要素の位置に応じてスタイルを適用することができます。

　また、nth-of-type疑似クラスは、要素のタイプに基づいてスタイルを適用するために使用されます。例えば、以下のような CSSコードは、パラグラフ要素の偶数番目にスタイルを適用します。

CSS

p:nth-of-type(even) {
	color: red;
}

　このコードは、パラグラフ要素の偶数番目の要素に赤色のテキストカラーを設定します。nth-of-type疑似クラスを使用することで、要素の種類に応じてスタイルを適用することができます。

　さらに、nth-last-child疑似クラスは、要素の末尾から数えての位置に基づいてスタイルを適用するために使用されます。例えば、以下のような CSSコードは、リストの末尾から 2番目の要素にスタイルを適用します。

CSS

li:nth-last-child(2) {
	font-size: 20px;
}

　このコードは、li要素の末尾から2番目の要素に 20px のフォントサイズを設定します。nth-last-child疑似クラスを使用することで、要素の末尾から数えた位置に応じてスタイルを適用することができます。

　また、nth-last-of-type疑似クラスは、要素のタイプに基づいて、要素の末尾から数えた位置に応じてスタイルを適用するために使用されます。例えば、以下のようなCSSコードは、パラグラフ要素の末尾から 2番目にスタイルを適用します。

CSS

p:nth-last-of-type(2) {
	font-weight: bold;
}

　このコードは、パラグラフ要素の末尾から 2番目の要素に太字のスタイルを設定します。nth-last-of-type疑似クラスを使用することで、要素の種類に応じて、要素の末尾から数えた位置に応じてスタイルを適用することができます。

　また、nth-child、nth-of-type、nth-last-child、nth-last-of-typeなどの疑似クラスは、引数に式を渡すことができます。例えば、以下のような CSSコードは、3n+2番目のリストアイテムにスタイルを適用します。

CSS

li:nth-child(3n+2) {
	color: blue;
}

　このコードは、li要素の 3n+2番目の要素に青色のテキストカラーを設定します。式を使用することで、要素の位置に基づいてスタイルを適用する柔軟性が増します。

　また、疑似クラスは、マウスオーバー時の状態やクリック時の状態など、要素の状態に応じてスタイルを適用するためにも使用されます。例えば、以下のような CSSコードは、マウスオーバー時にリンクの背景色を変更します。

CSS

a:hover {
	background-color: yellow;
}

　このコードは、a要素にマウスオーバーした場合に、背景色を黄色に変更します。:hover疑似クラスを使用することで、マウスオーバー時の要素の状態に応じてスタイルを適用することができます。

　また、疑似クラスは、フォーム要素に対しても使用されます。例えば、以下のような CSSコードは、フォーム要素にフォーカスが当たった際に、スタイルを適用します。

CSS

input:focus {
	outline: none;
	border: 1px solid blue;
}

　このコードは、input要素にフォーカスが当たった場合に、アウトラインを非表示にし、1pxの青色の境界線を設定します。:focus疑似クラスを使用することで、フォーム要素がアクティブな状態になったときのスタイルをカスタマイズすることができます。

　一部の疑似クラスには、JavaScriptを使用してスタイルを適用することができるものもあります。例えば、:hover、:active、:focusなどの疑似クラスは、JavaScriptによるイベント処理によってもスタイルを変更することができます。

　CSSの疑似クラスは、Webデザインやフロントエンド開発において重要な概念であり、Webページの見た目や動作を改善するために使用されます。疑似クラスの種類や使い方を正確に理解することで、より洗練された Webページを作成することができます。ただし、疑似クラスの過度の使用はパフォーマンスに悪影響を与える可能性があるため、適切に使用することが必要です。疑似クラスの理解は Webデザインやフロントエンド開発において不可欠なスキルの 1つです。