以下は、提供された英語のテキストを日本語に翻訳したものです。

CSS - Pseudo Classes

CSS -擬似クラス

擬似クラスとは？

こんにちは、将来のCSS魔法使いたち！今日は、CSSの擬似クラスという魔法の世界に飛び込んでみましょう。派手な用語に驚かないでください - これは思ったよりも簡単です。実際、一度慣れてしまえば、擬似クラスを使いこなすプロになるのは一瞬のことです！

では、擬似クラスとは一体何でしょうか？想象的に、ウェブページ上の要素をその状態や条件に基づいてスタイルを適用できるスーパーパワーを持っていると考えてみてください。それが擬似クラスの仕事です！ユーザーが要素の上にホバーしているかどうか、リストの最初の子要素かどうか、甚至是非の言語でページが表示されているかどうかなど、そのような基準に基づいてスタイルを適用することができます。

文法

具体的な擬似クラスに入る前に、文法を簡単に見てみましょう。実際にはとてもシンプルです：

セレクター:擬似クラス {
  プロパティ: 値;
}

セレクターの後ろにあるコロン（:）が、擬似クラスを示しています。簡単でしょ？

擬似クラス Hover

では、最も一般的で楽しい擬似クラスの1つ、:hoverから始めましょう。この小さな宝石は、ユーザーがマウスを要素の上にホバーしたときにそのスタイルを変更できるようにします。まるで魔法のようです！

<button class="my-button">ここをホバーしてください！</button>

.my-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

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

この例では、ボタンは最初は青色で白いテキストの状態です。しかし、ホバーすると - ポン！ - 軽い青色に変わり、黒いテキストになります。実際に試してみてください！

擬似クラス Active

次は:active擬似クラスです。これは、ユーザーがボタンをクリックするなどして要素がアクティブ化されるときにトリガーされます。

<button class="my-button">ここをクリックしてください！</button>

.my-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.my-button:active {
  background-color: darkblue;
  transform: scale(0.95);
}

今、ボタンをクリックして保持すると、青色が濃くなり、少し縮小します。まるでボタンが「ああ、私がクリックされているんだ！」と言っているようです。

擬似クラス Focus

:focus擬似クラスはアクセシビリティを向上させるのに特に役立ちます。要素がフォーカスを取得したときに適用されます。これはユーザーが入力フィールドをクリックまたはタブで選択したときに発生します。

<input type="text" class="my-input" placeholder="何かを入力してください...">

.my-input {
  border: 2px solid #ccc;
  padding: 5px;
}

.my-input:focus {
  border-color: blue;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}

このCSSでは、入力フィールドがフォーカスされたとき、青色のボーダーとやや青いグラデーションが表示されます。ユーザーをフォームにガイドするのに役立ちます！

擬似クラス nth Child

もう少し凝った:nth-child()擬似クラスを見てみましょう。このクラスは、兄弟要素の位置に基づいて要素を選択します。

<ul class="my-list">
  <li>最初の項目</li>
  <li>二番目の項目</li>
  <li>三番目の項目</li>
  <li>四番目の項目</li>
  <li>五番目の項目</li>
</ul>

.my-list li:nth-child(odd) {
  background-color: #f2f2f2;
}

.my-list li:nth-child(3n) {
  color: blue;
}

この例では、奇数番目のリスト項目に軽い灰色の背景を適用し、3倍数の項目に青いテキストを適用します。リストにパターンを作成しているようなものです！

擬似クラス First-Child

:first-child擬似クラスは、兄弟要素のグループの最初の要素を選択します。リストの最初の項目や記事の最初のパラグラフに特別な処置を与えるのに適しています。

<div class="container">
  <p>私は最初のパラグラフです！</p>
  <p>私は普通のパラグラフです。</p>
  <p>私もそうです！</p>
</div>

.container p:first-child {
  font-weight: bold;
  color: blue;
}

今、最初のパラグラフが他のパラグラフから目立つようになります。最初の要素にVIPパスを与えているようなものです！

擬似クラス Last-Child

:last-child擬似クラスは、:first-childとは逆で、兄弟要素のグループの最後の要素を選択します。

<ul class="my-list">
  <li>最初の項目</li>
  <li>二番目の項目</li>
  <li>三番目の項目</li>
  <li>最後の項目！</li>
</ul>

.my-list li:last-child {
  font-style: italic;
  color: green;
}

このCSSでは、リストの最後の項目に特殊な緑色とイタリックスタイルを適用します。これで、終わりを印象づけるのに役立ちます！

擬似クラス Lang

:lang擬似クラスは少し特殊です。これは、ドキュメントや要素の言語に基づいて要素を選択します。

<p lang="en">Hello, World!</p>
<p lang="fr">Bonjour, le Monde!</p>
<p lang="es">¡Hola, Mundo!</p>

p:lang(en) {
  color: blue;
}

p:lang(fr) {
  color: red;
}

p:lang(es) {
  color: green;
}

このCSSは、各挨拶をその言語に基づいて色分けします。まるでウェブサイトに多言語の色コードを作成しているようなものです！

擬似クラス Not

最後に、:not()擬似クラスを見てみましょう。これは少し異なります - 指定されたセレクターにマッチしない要素を選択します。

<div class="container">
  <p>私はパラグラフです。</p>
  <p class="special">私は特別なパラグラフです！</p>
  <p>私は別のパラグラフです。</p>
</div>

.container p:not(.special) {
  color: gray;
}

この場合、\"special\"クラスを持たないすべてのパラグラフが灰色に色変わります。まるで「この1つのものを除いてすべてをスタイル付けする」と言っているようなものです！

CSS擬似クラスのリスト

CSSには多くの擬似クラスが利用できます。以下は一般的なもののリストです：

擬似クラス	説明
:hover	マウスが要素の上にホバーしているときに選択
:active	要素がアクティブ化されているときに選択
:focus	要素がフォーカスを取得したときに選択
:nth-child()	兄弟要素の位置に基づいて選択
:first-child	兄弟要素のグループの最初の要素を選択
:last-child	兄弟要素のグループの最後の要素を選択
:lang()	言語に基づいて選択
:not()	指定されたセレクターにマッチしない要素を選択
:link	未訪問のリンクを選択
:visited	訪問済みのリンクを選択
:checked	チェックされた入力要素を選択
:disabled	無効な要素を選択
:empty	子要素を持たない要素を選択

そして、ここまでで、CSS擬似クラスの世界を旅しました。基本的なものから少し高度な技術まで、これらをマスターする鍵は練習です。ですから、自分のプロジェクトでこれらの擬似クラスを試してみてください。そうすれば、ユーザーの操作に応じてさまざまな方法で反応する動的なウェブサイトを作成できるようになるでしょう。楽しいコーディングを！

Credits: Image by storyset