CSSで疑似クラスのセレクタの書き方

CSS SCSS

CSSで疑似クラスのセレクタの書き方

CSSで疑似クラスのセレクタを使用する方法について説明します。
疑似クラスは、特定の状態や条件に基づいてHTML要素にスタイルを適用するためのCSSセレクタです。
主に2つのカテゴリに分けられます：ユーザーインタラクションに基づく疑似クラスと構造に基づく疑似クラスです。
以下にそれぞれの使い方を示します。

ユーザーインタラクションに基づく疑似クラス

これらの疑似クラスは、ユーザーの操作や入力に応じてスタイルを変更します。
代表的なものとして以下があります。

  • :hover

要素にマウスカーソルが乗ったときに適用されます。
リンクやボタンのホバー効果を作成する際に使います。

.test-button:hover {
  background-color: #007bff;
  color: #ffffff;
}
  • :focus

要素がフォーカスを受けたときに適用されます。
フォームフィールドやリンクがアクティブなときに使います。

.test-input:focus {
  border-color: #007bff;
  outline: none;
}
  • :active

要素がクリックされているときに適用されます。
ボタンを押しているときのスタイルを定義するのに使用します。

.test-button:active {
  background-color: #0056b3;
}

構造に基づく疑似クラス

これらの疑似クラスは、要素の構造や位置に基づいてスタイルを変更します。
代表的なものとして以下があります。

  • :first-child

親要素の最初の子要素に適用されます。

.test-list-item:first-child {
  font-weight: bold;
}
  • :last-child

親要素の最後の子要素に適用されます。

.test-list-item:last-child {
  margin-bottom: 0;
}
  • :nth-child(n)

親要素のn番目の子要素に適用されます。
nは数値や式で指定できます。

.test-list-item:nth-child(odd) {
  background-color: #f0f0f0;
}
  • :nth-of-type(n)

親要素内の指定された型のn番目の要素に適用されます。
特定のタグに基づくスタイル変更に使います。

.test-container p:nth-of-type(2) {
  color: #ff0000;
}

疑似要素と疑似クラスの違い

疑似クラスと疑似要素は似ていますが、役割が異なります。
疑似クラスは要素の状態を、疑似要素は要素の特定部分（例：前に挿入する内容）をターゲットにします。
例えば、:before や :after は疑似要素です。

  • ::before

要素の内容の前にコンテンツを挿入します。

.test-element::before {
  content: "→ ";
  color: #ff0000;
}
  • ::after

要素の内容の後にコンテンツを挿入します。

.test-element::after {
  content: " ←";
  color: #ff0000;
}

疑似クラスは、要素の状態に応じてスタイルを変更し、ユーザーエクスペリエンスを向上させるための強力なツールです。
スタイルの適用が直感的であり、ユーザーのインタラクションや要素の構造に基づいて柔軟にデザインを調整できます。