CSSには、疑似クラス（pseudo-classes）と疑似要素（pseudo-elements）という便利な機能があります。これらを使うことで、特定の状態や要素の一部にスタイルを適用することができます。

1. ホバー疑似クラス（:hover）

:hover疑似クラスは、マウスカーソルが要素上にあるときのスタイルを指定します。ボタンやリンクなどのインタラクティブな要素によく使われます。

.button:hover {
  background-color: lightblue;
}

2. アクティブ疑似クラス（:active）

:active疑似クラスは、要素がユーザーによってアクティブになったとき（クリックしている最中）のスタイルを指定します。ボタンやリンクでクリックした瞬間のスタイルを設定するのに便利です。

.button:active {
  background-color: orange;
}

3. ファーストレター疑似要素（::first-letter）

::first-letter疑似要素は、テキストの最初の文字に対してスタイルを設定します。文章の最初の文字を大きくしたり、装飾したりすることができます。

p::first-letter {
  font-size: 150%;
  color: red;
}

4. ファーストライン疑似要素（::first-line）

::first-line疑似要素は、テキストの最初の行に対してスタイルを設定します。文章の最初の行を特別なスタイルで表示することができます。

p::first-line {
  font-weight: bold;
  font-size: 120%;
}

5. ラストチャイルド疑似クラス（:last-child）

:last-child疑似クラスは、親要素の最後の子要素にスタイルを設定します。例えば、リストの最後の項目に特別なスタイルを適用することができます。

ul li:last-child {
  color: green;
}

これらの疑似クラスと疑似要素を使うことで、Webページのデザインをより豊かに表現することができます。自分のページにどう活用するか、試してみてください。