CSS

CSSの疑似クラスとは？使い方を解説

本記事では、CSSの疑似クラスについて詳しく解説していきます。

疑似クラスとは？

疑似クラスは、HTML要素の特定の状態や行動に対してスタイルを適用するための仕組みです。

例えば、リンクが未訪問状態のときだけ別の色を適用する、マウスオーバー時にボタンのスタイルを変更する、などのような場面で疑似クラスが活躍します。

疑似クラスの書き方

疑似クラスはセレクタにコロン（:）を付けて表現されます。

基本的な構文は以下のようになります。

selector:pseudo-class {
  property: value;
}

リンクの状態に対応する疑似クラス

未訪問状態（リンクをクリックしていない状態）のリンクにスタイルを適用する場合は、:link 疑似クラスを使用します。

a:link {
  color: blue;
}

訪問済み状態（リンクをクリックした後の状態）のリンクにスタイルを適用する場合は、:visited 疑似クラスを使用します。

a:visited {
  color: purple;
}

マウスオーバーに対応する疑似クラス

要素にマウスが乗ったときのスタイルを設定したい場合は、:hover 疑似クラスを使用します。

button:hover {
  background-color: yellow;
}

フォーカスに対応する疑似クラス

フォーム要素などがフォーカスを受け取った状態でのスタイルを設定したい場合は、:focus 疑似クラスを使用します。

input:focus {
  border: 2px solid red;
}

最初や最後の要素に対応する疑似クラス

リストなどの最初の要素に特定のスタイルを適用したい場合は、:first-child 疑似クラスを使用します。

ul li:first-child {
  font-weight: bold;
}

最後の要素に特定のスタイルを適用したい場合は、:last-child 疑似クラスを使用します。

ul li:last-child {
  text-decoration: underline;
}

まとめ

疑似クラスはCSSの便利な機能であり、HTML要素の特定の状態や行動に応じてスタイルを設定することができます。

これにより、Webページのユーザーエクスペリエンスを向上させることができるでしょう。

上記で解説した疑似クラスは一部の例であり、実際にはさまざまな疑似クラスがありますので、さらなる学習と実践を重ねてマスターしてください。

-CSS