CSSの疑似クラスとは？主要な種類と使い方をわかりやすく解説
CSSの疑似クラス（pseudo-class）は、セレクターに対して特別な効果や状態を追加するための仕組みです。JavaScriptなどのスクリプトを使わなくても、マウスオーバーやクリックといったユーザーの操作に応じたスタイルを手軽に実装できるのが大きな特徴です。
よく使われる主な疑似クラス一覧
以下は、CSSで最もよく使用される代表的な疑似クラスとその役割をまとめた表です。
| 値 | 説明 |
|---|---|
:link |
未訪問のリンクに特別なスタイルを適用します。 |
:visited |
すでに訪問済みのリンクに特別なスタイルを適用します。 |
:hover |
要素にマウスカーソルが重なっているときにスタイルを適用します。 |
:active |
クリック中など、アクティブな状態の要素にスタイルを適用します。 |
:focus |
入力欄など、フォーカスを持っている要素にスタイルを適用します。 |
:first-child |
親要素の最初の子要素である場合にスタイルを適用します。 |
:lang |
指定した言語が設定された要素に対してスタイルを適用します。 |
リンク系疑似クラスの記述順序（LVHA順）
リンクに関連する疑似クラスは、「:link → :visited → :hover → :active」の順序で記述するのが基本です。この順序は「LVHA順」と呼ばれており、順序を間違えると後から書いたスタイルが先のものを上書きしてしまい、意図したデザインにならないことがあります。
具体的な使用例
実際のコードでは、次のように記述します。
a:link {
color: blue; /* 未訪問のリンク */
}
a:visited {
color: purple; /* 訪問済みのリンク */
}
a:hover {
color: red; /* マウスオーバー時 */
}
a:active {
color: orange; /* クリック中 */
}このように疑似クラスを活用することで、JavaScriptに頼らずCSSだけでインタラクティブな表現を実現できます。ボタンやナビゲーションメニューの装飾など、日常的なWeb制作で頻繁に使われる重要な機能なので、ぜひ使いこなせるようになりましょう。
-
CSSの疑似要素（Pseudo-element）とは？基本構文と実例付きでわかりやすく解説
CSSの疑似要素（Pseudo-element）とは、要素の一部を指定してスタイルを適用するためのセレクターです。たとえば、テキストの最初の1文字や1行目など、通常のセレクターでは選択できない特定の部分をターゲットにできます。また、::before と ::after を使えば、要素の前後にコンテンツを挿入することも可能です。基本構文疑似要素は、セレクターに続けて「::」＋疑似要素名という形式で記述します。基本的な書き方は以下のとおりです。Selector::pseudo-element { css-property: /*値*/; }サンプルコード①：カウンターを使
-
CSSの疑似クラス（Pseudo-class）とは？基本から実例までわかりやすく解説
CSSの疑似クラス（pseudo-class）は、セレクタに追加することで、その要素の「特別な状態」を指定するためのキーワードです。これを使うことで、通常のセレクタだけでは表現できない細かいスタイル制御が可能になります。例えば、リンクにマウスカーソルが乗っている状態（:hover）、チェックボックスが選択されている状態（:checked）、すでに訪問済みのリンク（:visited）など、要素の状態に応じてスタイルを切り替えられます。代表的な疑似クラスの一覧:link … まだ訪問していないリンクに適用:visited … 訪問済みのリンクに適用:hover … マウスカーソルが要素の上にあると