CSSの疑似クラスとは?よく使われる主要な疑似クラス一覧と使い方
CSSの疑似クラス(pseudo-class)は、要素の状態や位置関係に応じてスタイルを適用できるセレクタの一種です。通常のクラス名をHTML側に付与する必要がなく、リンクの訪問状況やマウス操作、フォーカスの有無などを自動的に判定してデザインを切り替えられるため、Web制作で非常に頻繁に活用されています。
ここでは、実務で特によく使われる代表的な疑似クラスを一覧形式でご紹介します。
よく使われる主要な疑似クラス一覧
| 疑似クラス | 説明 |
|---|---|
| :link | まだ訪問していないリンクに対してスタイルを適用します。 |
| :visited | すでに訪問済みのリンクに対してスタイルを適用します。 |
| :hover | 要素にマウスカーソルが重なっている(ホバーしている)ときにスタイルを適用します。 |
| :active | クリック中など、要素がアクティブな状態のときにスタイルを適用します。 |
| :focus | 要素がフォーカスを持っている間(入力欄を選択中など)にスタイルを適用します。 |
| :first-child | 親要素の中で最初の子要素である場合にスタイルを適用します。 |
| :lang | 指定した言語が設定されている要素に対してスタイルを適用します。 |
使用例：リンクの状態別に色を変える
リンク要素(<a>)は、上記の疑似クラスと組み合わせることで、状態ごとに異なる見た目を簡単に実現できます。
a:link { color: #0000ff; } /* 未訪問のリンク */
a:visited { color: #800080; } /* 訪問済みのリンク */
a:hover { color: #ff0000; } /* マウスオーバー時 */
a:active { color: #ffa500; } /* クリック中 */注意点
リンク関連の疑似クラスを定義する場合は、:link → :visited → :hover → :active(通称「LVHA」)の順序で記述するのが推奨されています。順序が異なると、後から記述したスタイルが優先され、意図した通りに表示されないことがあります。
また、:hoverや:activeは主にマウス操作を前提とした疑似クラスのため、スマートフォンなどのタッチデバイスでは挙動が異なる点にも留意しましょう。
-
CSSの要素タイプセレクターとは？基本構文と実例をわかりやすく解説
CSSの要素タイプセレクターは、指定した種類の要素をすべて一括で選択するためのセレクターです。たとえば「li」と指定すれば、ページ内のすべてのリスト項目に同じスタイルが適用されます。HTML文書全体に共通のデザインを設定したい場合に非常に便利な、CSSの基本的なセレクターです。 構文 要素タイプセレクターの書き方は以下のとおりです。セレクター名として要素名をそのまま記述します。 element { /*declarations*/ } サンプルコード1：リストとdiv要素への適用例 次の例では、li 要素と div 要素に対してそれぞれスタイルを指定しています。 &l
-
CSSの:focus-within疑似クラスの使い方をわかりやすく解説
フォーカスを受け取った要素そのものだけでなく、その親要素にもスタイルを適用したい場合は、CSSの:focus-within疑似クラスを使用します。:focus-withinは、「要素自身、またはその子孫要素のいずれかがフォーカスを持っているとき」に一致する疑似クラスです。フォーム全体やカード型レイアウトなど、入力フィールドを含むコンテナの見た目を動的に変化させたい場面で特に便利です。以下に、CSSの:focus-within疑似クラスの具体的な使用例を示します。例1：フォームへの適用<!DOCTYPE html> <html> <head> <styl