CSSで要素の状態を表現！「sign」を使って、ユーザーとのインタラクションを豊かに

「:hover」以外にも、「:focus」、「:active」、「:visited」など、様々な擬似クラスが存在します。これらの擬似クラスは、ユーザーとのインタラクションや要素の状態に応じて、要素のスタイルを変化させるために使用されます。

以下に、「:hover」擬似クラスの例を示します。

a:hover {
  color: red;
  text-decoration: underline;
}

このコードは、すべての <a> 要素に対して、「:hover」擬似クラスを適用します。マウスカーソルが <a> 要素の上をホババーすると、要素の色が赤くなり、下線が引かれます。

「Miscellaneous」モジュールには、他にも様々なプロパティや機能が定義されています。詳細は、以下のドキュメントを参照してください。

---

nav ul li {
  display: inline-block;
  margin-right: 20px;
}

nav ul li a {
  color: black;
  text-decoration: none;
}

nav ul li:hover {
  background-color: blue;
  color: white;
}

例2：ボタンの押下時効果

この例では、ボタンが押されたときに背景色とフォント色が変化する効果を適用します。

button {
  background-color: gray;
  color: black;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

button:active {
  background-color: black;
  color: white;
}

例3：入力フォームのフォーカス効果

この例では、入力フォームにフォーカスが当たると、境界線が青くなる効果を適用します。

input {
  padding: 10px;
  border: 1px solid gray;
}

input:focus {
  outline: none;
  border: 2px solid blue;
}

例4：訪問済みリンクのスタイル

この例では、訪問済みのリンクにグレーのテキスト色を設定します。

a:visited {
  color: gray;
}

例5：要素の最初のものを選択

この例では、ul 要素内の最初の li 要素に赤い背景色を設定します。

ul li:first-child {
  background-color: red;
}

例6：奇数番目の要素を選択

この例では、ul 要素内の奇数番目の li 要素に青の背景色を設定します。

ul li:nth-child(odd) {
  background-color: blue;
}

例7：特定のタイプの要素を選択

この例では、ページ内のすべての img 要素に赤いボーダーを設定します。

img:hover {
  border: 5px solid red;
}

これらの例はほんの一例です。CSS 擬似クラスを使用して、様々なスタイル効果を作成することができます。

---