【CSS】疑似クラス・疑似要素の使い方を基本から解説｜Webの基礎

記事内には広告が含まれます

2026年7月27日2026年7月29日

はじめに

「マウスを乗せたときだけボタンの色を変えたい」「リストの1番目の要素だけ余白をなくしたい」「アイコンをCSSだけで追加したい」という経験はありませんか？

これらはすべて、疑似クラス（pseudo-class）と疑似要素（pseudo-element）というCSSの機能で実現できます。

前回の記事では、要素の配置方法を制御するpositionについて解説しました。
今回は、以前解説した「セレクタ」の応用編として、要素の状態や特定の位置を指定する疑似クラスと、要素の一部分に新しい内容を追加する疑似要素について、仕組みからサンプルコードまでわかりやすく解説します。

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

疑似クラスと疑似要素は、どちらもセレクタの末尾にコロン（: や ::）を付けて指定する特殊なセレクタです。通常のセレクタでは指定できない「要素の状態」や「要素の一部分」を指定できます。

種類	記号	役割
疑似クラス	`:`（コロン1つ）	要素の状態や位置を指定する（例：マウスが乗っている、1番目の要素）
疑似要素	`::`（コロン2つ）	要素の一部分に新しい内容を追加・装飾する（例：先頭文字、要素の前後）

CSS2までは疑似要素もコロン1つ（:beforeなど）で書かれていましたが、CSS3以降は疑似クラスと区別するためコロン2つ（::before）が正式な書式です。ブラウザは互換性のため両方とも認識しますが、新しく書く場合は::を使いましょう。

疑似クラスの主な種類

疑似クラス	説明
`:hover`	マウスカーソルが乗っているとき
`:focus`	フォーム部品などがフォーカスされているとき
`:active`	クリック（押下）されている間
`:first-child`	兄弟要素の中で最初の要素
`:last-child`	兄弟要素の中で最後の要素
`:nth-child()`	兄弟要素の中でn番目の要素
`:not()`	指定した条件に一致しない要素
`:checked`	チェックボックス・ラジオボタンが選択されているとき

:hover（マウスホバー）

:hover は、マウスカーソルが要素の上に乗っているときにだけスタイルを適用する疑似クラスです。

書式

セレクタ:hover {
    プロパティ: 値;
}

サンプル（ボタンの色を変える）

.btn {
    background-color: #0077cc;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.btn:hover {
    background-color: #005fa3;
}

transition を組み合わせることで、色の変化が滑らかになり、ユーザーへのフィードバックとして自然に見せられます。

:focus（フォーカス時）

:focus は、入力欄などがクリックやTabキーでフォーカスされているときにスタイルを適用する疑似クラスです。

書式

セレクタ:focus {
    プロパティ: 値;
}

サンプル（入力欄の枠を強調）

input[type="text"] {
    border: 1px solid #ccc;
    padding: 8px;
}

input[type="text"]:focus {
    border-color: #0077cc;
    outline: 2px solid rgba(0, 119, 204, 0.3);
}

outline: none; で枠を完全に消してしまうと、キーボード操作をするユーザーが「今どこにフォーカスがあるか」わからなくなります。デザインを変更する場合も、フォーカス時の見た目自体は必ず残しましょう。

:active（クリック中）

:active は、要素がクリック（押下）されている瞬間だけスタイルを適用する疑似クラスです。

書式

セレクタ:active {
    プロパティ: 値;
}

サンプル（押した瞬間だけ沈む効果）

.btn:active {
    transform: translateY(2px);
    background-color: #004a80;
}

:hover → :focus → :active の順に指定するのが基本です。この順序が逆になると、意図した見た目にならないことがあるので注意してください。

:first-child / :last-child（最初・最後の要素）

:first-child は兄弟要素の中で最初の要素、:last-child は兄弟要素の中で最後の要素にスタイルを適用する疑似クラスです。

書式

セレクタ:first-child {
    プロパティ: 値;
}

セレクタ:last-child {
    プロパティ: 値;
}

サンプル（リストの最初と最後だけ余白調整）

li {
    margin: 10px 0;
}

li:first-child {
    margin-top: 0;
}

li:last-child {
    margin-bottom: 0;
}

リストや区切り線を持つ要素で、先頭・末尾だけ余白やボーダーを外したいときによく使われます。

:nth-child()（n番目の要素）

:nth-child() は、兄弟要素の中でn番目にあたる要素を指定する疑似クラスです。数値だけでなく、even（偶数）・odd（奇数）・2nのような計算式も指定できます。

書式

セレクタ:nth-child(値) {
    プロパティ: 値;
}

サンプル（テーブルの行を1行おきに色分け）

/* 偶数行だけ背景色を変える（縞模様） */
tr:nth-child(even) {
    background-color: #f5f5f5;
}

/* 3番目の要素だけ強調 */
li:nth-child(3) {
    color: #ff5555;
    font-weight: bold;
}

even / odd の指定は、テーブルの行を交互に色分けする「縞模様（ストライプ）」デザインの定番テクニックです。

:not()（否定セレクタ）

:not() は、カッコ内に指定した条件に一致しない要素を選ぶ疑似クラスです。

書式

セレクタ:not(除外したい条件) {
    プロパティ: 値;
}

サンプル（最後の要素以外にボーダーを付ける）

/* 最後の要素以外にだけ下線を引く */
li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

「最後の要素だけ除外する」といった処理を、:last-child に上書き用のスタイルを別途書かずに1行で実現できます。

:checked（選択状態）

:checked は、チェックボックスやラジオボタンが選択されているときにスタイルを適用する疑似クラスです。

書式

セレクタ:checked {
    プロパティ: 値;
}

サンプル（チェック時にラベルの色を変える）

<input type="checkbox" id="agree">
<label for="agree">利用規約に同意する</label>

input:checked + label {
    color: #0077cc;
    font-weight: bold;
}

input:checked 自体だけでなく、隣接セレクタ（+）と組み合わせてチェック時にラベル側の見た目を変える使い方もよく使われます。

疑似要素の主な種類

疑似要素	説明
`::before`	要素の内容の直前に新しい内容を追加
`::after`	要素の内容の直後に新しい内容を追加
`::first-letter`	要素内の最初の1文字にスタイルを適用
`::first-line`	要素内の最初の1行にスタイルを適用
`::placeholder`	フォーム部品のプレースホルダー文字にスタイルを適用

::before / ::after（要素の前後に内容を追加）

::before と ::after は、要素のHTMLを書き換えずに、CSSだけで内容を追加できる疑似要素です。必ず content プロパティとセットで使います。

書式

セレクタ::before {
    content: "追加する内容";
    プロパティ: 値;
}

セレクタ::after {
    content: "追加する内容";
    プロパティ: 値;
}

サンプル（必須項目に「※必須」マークを付ける）

<label class="required">お名前</label>

.required::after {
    content: "※必須";
    color: #ff5555;
    font-size: 0.8rem;
    margin-left: 6px;
}

サンプル（リンクに外部サイトアイコンを付ける）

a.external::after {
    content: "↗";
    margin-left: 4px;
}

content: ""; のように**空文字**を指定すれば、テキストを追加せずに図形や装飾だけを表示することもできます。position: absolute; と組み合わせて、アイコンや飾り線を作るテクニックとしてよく使われます。

::first-letter / ::first-line（先頭文字・先頭行）

::first-letter は要素内の最初の1文字、::first-line は要素内の最初の1行にスタイルを適用する疑似要素です。

書式

セレクタ::first-letter {
    プロパティ: 値;
}

セレクタ::first-line {
    プロパティ: 値;
}

サンプル（雑誌風の見出しデザイン）

p.lead::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: #0077cc;
}

p.lead::first-line {
    font-weight: bold;
}

段落の先頭文字を大きくする「ドロップキャップ」など、雑誌や新聞のようなデザインに使われる装飾テクニックです。

::placeholder（プレースホルダーの装飾）

::placeholder は、input や textarea に指定したプレースホルダー文字（未入力時に薄く表示される案内文）にスタイルを適用する疑似要素です。

書式

セレクタ::placeholder {
    プロパティ: 値;
}

サンプル

<input type="text" placeholder="例：山田 太郎">

input::placeholder {
    color: #aaa;
    font-style: italic;
}

サンプル（フォームのバリデーション表示）

疑似クラスと疑似要素を組み合わせた、実用的なサンプルです。

HTML

<form>
    <label class="required" for="name">お名前</label>
    <input type="text" id="name" placeholder="例：山田 太郎">

    <label for="agree">
        <input type="checkbox" id="agree">
        利用規約に同意する
    </label>

    <button type="submit" class="btn">送信する</button>
</form>

CSS

/* 必須ラベルに「※必須」を自動追加 */
.required::after {
    content: "※必須";
    color: #ff5555;
    font-size: 0.8rem;
    margin-left: 6px;
}

/* プレースホルダーを薄いグレーに */
input[type="text"]::placeholder {
    color: #aaa;
}

/* フォーカス時に枠を強調 */
input[type="text"]:focus {
    border-color: #0077cc;
    outline: 2px solid rgba(0, 119, 204, 0.3);
}

/* チェック時にラベルの色を変える */
input[type="checkbox"]:checked + label {
    color: #0077cc;
    font-weight: bold;
}

/* ボタンのホバー・押下エフェクト */
.btn {
    background-color: #0077cc;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.btn:hover {
    background-color: #005fa3;
}

.btn:active {
    transform: translateY(2px);
}

このコードでは、::after で必須マークを自動表示し、:focus で入力中の欄を強調、:checked でチェック状態をラベルに反映し、:hover / :active でボタンに操作感を出しています。HTMLを書き換えずに、CSSだけでフォームの使いやすさを大きく改善できる例です。