【CSS】擬似クラス - 要素の状態を示すセレクター

CSSの擬似クラスについて解説します。

検証環境

CSS

macOS

14.1

擬似クラス

擬似クラスは“要素の状態を示すセレクター”です。

:擬似クラス {
    プロパティ名: プロパティ値;
}

フォーカスが当たっている状態を示す擬似クラスはfocusです。

この擬似クラスを使って擬似クラスの具体例を示します。

sample.html

<style>
___ih_hl_start
:focus {
___ih_hl_end
    color: red;
}
</style>

<label>検索</label>
<input type="text" value="テキスト">

プレビュー

２行目の:focusが擬似クラスを使ったセレクターです。

フォーカスが当たっている間、要素のテキストカラーを赤色にするスタイルを定義しています。

実際に入力項目をクリック（タップ）すると、フォーカスが当たりテキストカラーが赤色になります。

擬似クラスには様々な種類があります。

代表的な擬似クラスは次の通りです。

擬似クラス	要素状態
hover	ポインティングデバイス（マウスカーソル）が要素に被さった状態です。
checked	チェックボックスやラジオボタンがONの状態です。
required	入力項目要素が必須の状態です。
active	要素がクリックなどによって、アクティブになった状態です。
focus	要素にフォーカスがあたっている状態です。
not	セレクターにマッチしない要素です。
first-child	兄弟要素の最初の要素です。
last-child	兄弟要素の最後の要素です。
only-child	兄弟要素がない１つのみの要素です。
nth-child	兄弟要素のN番目の要素です。
nth-last-child	兄弟要素の最後からN番目の要素です。
first-of-type	兄弟要素の最初の特定要素です。
last-of-type	兄弟要素の最後の特定要素です。
only-of-type	兄弟要素に特定要素が１つのみの要素です。
nth-of-type	兄弟要素のN番目の特定要素です。
nth-last-of-type	兄弟要素の最後からN番目の特定要素です。