CSSでの「&:」の意味と使用方法

1. &:hover - マウスカーソルが要素の上にあるときにスタイルを適用します。

   .button:hover {
   background-color: #ff0000;
   }

2. &:focus - 要素がフォーカスを受け取ったときにスタイルを適用します（フォーカス可能な要素に対してのみ有効です）。

   .input-field:focus {
   border-color: #00ff00;
   }

3. &:active - 要素がアクティブ（クリックまたはタップ中）なときにスタイルを適用します。

   .button:active {
   transform: scale(0.9);
   }

4. &:nth-child - 親要素内の特定の順番の子要素にスタイルを適用します。

   .list-item:nth-child(2n) {
   background-color: #f0f0f0;
   }

5. &:before, &:after - 要素の前後にコンテンツを挿入します。

   .quote:before {
   content: "「";
   }
   .quote:after {
   content: "」";
   }

これらは一部の一般的な使用例ですが、CSSの「&:」は非常に柔軟であり、他にも様々な使用方法があります。具体的な要件に基づいて、さまざまな擬似クラスを使用することができます。