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

CSSの疑似クラス（Pseudo-class）とは？基本から実例までわかりやすく解説

CSSの疑似クラス（pseudo-class）は、セレクタに追加することで、その要素の「特別な状態」を指定するためのキーワードです。これを使うことで、通常のセレクタだけでは表現できない細かいスタイル制御が可能になります。

例えば、リンクにマウスカーソルが乗っている状態（:hover）、チェックボックスが選択されている状態（:checked）、すでに訪問済みのリンク（:visited）など、要素の状態に応じてスタイルを切り替えられます。

代表的な疑似クラスの一覧

  • :link … まだ訪問していないリンクに適用
  • :visited … 訪問済みのリンクに適用
  • :hover … マウスカーソルが要素の上にあるときに適用
  • :active … 要素がクリックされている瞬間に適用
  • :focus … 要素がフォーカスされているときに適用
  • :checked … チェックボックスやラジオボタンが選択されているときに適用

疑似クラスの実装例

以下のコードは、リンク要素に対して各疑似クラスを使い分けたCSSのサンプルです。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
a {
    font-size: 18px;
    font-weight: bold;
}
a:link {
    color: rgb(17, 0, 255);
}
a:visited {
    color: rgb(128, 0, 107);
}
a:hover {
    color: rgb(255, 105, 243);
}
a:active {
    color: rgb(255, 153, 0);
}
</style>
</head>
<body>
<h1>疑似クラスのサンプル</h1>
<a href="#">これはサンプルのリンクテキストです</a>
<h2>上のリンクにマウスを乗せたり、クリックしたりすると疑似クラスの動作を確認できます</h2>
</body>
</html>

表示結果の確認方法

このコードをブラウザで開くと、リンクの状態によって色が変化する様子を確認できます。

1. 初期状態（未訪問リンク）

ページを開いた直後は :link が適用され、リンクは青色で表示されます。

CSSの疑似クラス（Pseudo-class）とは？基本から実例までわかりやすく解説

2. マウスを乗せたとき（hover）

リンクにカーソルを合わせると :hover が適用され、ピンク系の色に変わります。

CSSの疑似クラス（Pseudo-class）とは？基本から実例までわかりやすく解説

3. クリックしている瞬間（active）

リンクをクリックしている間は :active が適用され、オレンジ色に変化します。

CSSの疑似クラス（Pseudo-class）とは？基本から実例までわかりやすく解説

4. 訪問後の状態（visited）

同じページに戻ると、リンクは訪問済みと判定され、:visited が適用されて紫色に変わります。

CSSの疑似クラス（Pseudo-class）とは？基本から実例までわかりやすく解説

まとめ

疑似クラスを活用すれば、JavaScriptを使わずにユーザーの操作に応じた動的なスタイル変更を実現できます。特にナビゲーションメニューやボタンなどのUI要素では、:hover や :active を組み合わせることで、操作感のある快適なインターフェースを作れます。ぜひ実際のプロジェクトでも活用してみてください。

  1. IE8以下を含むすべてのブラウザに対応したCSS画像の不透明度設定方法

    画像に半透明効果を加えたい場合、CSSのopacityプロパティが最も標準的でモダンな解決策です。このプロパティは、Firefox 0.9以降、Safari 2以降、Opera 9以降、Internet Explorer 9以降、そしてすべてのバージョンのGoogle Chromeで動作します。 ただし、古いブラウザにも対応させるには、以下の互換用プロパティを併せて指定する必要があります。 -moz-opacity：Firefox 0.9より前の古いバージョン向けの不透明度プロパティ -khtml-opacity：Safari 1系など旧WebKitベースのブラウザ向けのプロパティ filt

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

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