CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの疑似クラス（Pseudo Class）とは？基本の書き方と実用例をわかりやすく解説

CSSの疑似クラス（Pseudo Class）は、要素の特別な状態を表現するための仕組みです。ドキュメント内の要素そのものだけでなく、「状態」「位置」「履歴」などといった外的な要素も捉えることができます。

たとえば「マウスカーソルが乗っている要素」「すでに訪問済みのリンク」「入力値が有効なフォームフィールド」といった状態は、通常のCSSセレクターでは直接指定できません。こうした場合でも、疑似クラスを使えば柔軟にスタイルを適用できます。

疑似クラスの基本構文

疑似クラスは、セレクターの後ろにコロン（:）を付けて記述します。

Selector:pseudo-class {
    css-property: /*値*/;
}

このように、セレクター:疑似クラス { プロパティ: 値; } という形式で、特定の状態にある要素に対してのみスタイルを適用できます。

例1：フォームのバリデーション（:valid / :invalid）

まずは、:valid と :invalid 疑似クラスを使って、フォームの入力内容が有効か無効かに応じて見た目を変える例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>CSS 疑似クラス</title>
<style>
form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
}
input:valid {
    color: #fefefe;
    background-color: #4CAF50;
}
input:invalid {
    color: #fefefe;
    background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS 疑似クラス</legend>
<label for="EmailSelect">メールアドレス :
<input type="email" id="EmailSelect" size="25" required>
</label><br>
<label for="PassSelect">パスワード :
<input type="password" id="PassSelect" minlength="8" required>
</label>
<div id="divDisplay">パスワードは8文字以上必須<br>すべての項目が必須入力です</div>
</fieldset>
</form>
</body>
</html>

表示結果

このコードを実行すると、次のような出力になります。

フォームに入力されたデータが無効な場合：

CSSの疑似クラス（Pseudo Class）とは？基本の書き方と実用例をわかりやすく解説

フォームに入力されたデータが有効な場合：

CSSの疑似クラス（Pseudo Class）とは？基本の書き方と実用例をわかりやすく解説

このように、JavaScriptを使わなくても、:valid や :invalid を使うだけでリアルタイムに入力チェックの結果を視覚的にユーザーへ伝えられます。

例2：:target 疑似クラスでリンク先を強調表示

続いて、:target 疑似クラスを使った例を見てみましょう。:target は、URLのフラグメント識別子（#以降の部分）によって現在参照されている要素を対象とします。

<!DOCTYPE html>
<html>
<head>
<title>CSS 疑似クラス</title>
<style>
form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
}
a {
    text-decoration: none;
    background:grey;
    color: white;
    border-radius: 3px;
    padding: 6px;
}
input[type="button"] {
    border-radius: 10px;
}
:target {
    border:4px solid black;
    margin: 0 auto;
    height: 200px;
    width: 200px;
    background-image: url('https://www.tutorialspoint.com/arangodb/images/arangodb-mini-logo.jpg');
}
#circle {
    border-radius: 50%;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS 疑似クラス</legend>
<div>
<div id="circle"></div>
<div id="square"></div>
</div>
<div>
<a href="#square">タイル</a>
<a href="#circle">アバター</a>
</div>
</fieldset>
</form>
</body>
</html>

表示結果

このコードを実行すると、次のような出力になります。

どちらのボタンもクリックする前：

CSSの疑似クラス（Pseudo Class）とは？基本の書き方と実用例をわかりやすく解説

「タイル」ボタンをクリックした後：

CSSの疑似クラス（Pseudo Class）とは？基本の書き方と実用例をわかりやすく解説

「アバター」ボタンをクリックした後：

CSSの疑似クラス（Pseudo Class）とは？基本の書き方と実用例をわかりやすく解説

クリックされたリンクの参照先となっている要素だけが :target の条件に一致し、枠線や背景画像が適用されます。この仕組みを応用すれば、タブUIやモーダルウィンドウなどもCSSのみで実装可能です。

まとめ

CSSの疑似クラスを使いこなすことで、ユーザーの操作や要素の状態に応じた動的なスタイリングが簡単に実現できます。:hover、:focus、:checked、:nth-child() など、ほかにも多くの便利な疑似クラスが用意されているので、ぜひ活用してみてください。

  1. CSSの:nth-child()疑似クラスの使い方と実例まとめ

    CSSの:nth-child()疑似クラスは、親要素の中でn番目に位置する子要素を選択するためのセレクタです。リストやカード型レイアウトなど、繰り返し表示される要素のうち特定の位置だけにスタイルを適用したい場合に非常に便利です。 構文 :nth-child()疑似クラスの基本構文は以下のとおりです。 :nth-child(n){     /*スタイル宣言*/ } 引数には単純な数値のほか、「odd（奇数番目）」「even（偶数番目）」といったキーワードや、「2n+1」のような数式も指定できるため、柔軟なスタイリングが可能です。 例1：複数のボックスに個別の背景色を適用する

  2. CSSの疑似クラスと疑似要素の違いを徹底解説！コロンの数と使い分けのポイント

    CSSには「疑似クラス」と「疑似要素」という、名前がよく似た2つの機能があります。どちらもセレクターを拡張する仕組みですが、役割や書き方が異なります。本記事では、両者の違いをサンプルコード付きでわかりやすく解説します。 疑似クラス（Pseudo-Class）とは 疑似クラスは、:hover、:active、:last-childのように、セレクターの「状態」や「条件」を表すものです。マウスオーバー時のスタイル変更など、要素が特定の状態にあるときの見た目を制御できます。 疑似クラスはコロン1つ（:）で始まります。 CSS疑似クラスの基本構文は以下のとおりです。 :pseudo-class {