CSSセレクタの始まりに基づいた要素の選択方法

1. 「^」を使用した属性値の始まりに基づく選択: CSSセレクタの属性値の先頭に「^」を付けることで、その値で始まる要素を選択できます。例えば、以下のようなHTMLがあるとします:

<ul>
  <li class="item">Apple</li>
  <li class="item">Banana</li>
  <li class="item">Orange</li>
</ul>

次のCSSセレクタを使用すると、クラスが「item」で始まる要素を選択できます:

li[class^="item"] {
  color: blue;
}

2. 「」を使用した部分一致に基づく選択: CSSセレクタの属性値に「」を含めることで、その値を部分的に含む要素を選択できます。例えば、以下のようなHTMLがあるとします:

<div id="container">
  <div class="box-one">Box 1</div>
  <div class="box-two">Box 2</div>
  <div class="box-three">Box 3</div>
</div>

次のCSSセレクタを使用すると、クラスに「box」を含む要素を選択できます:

div[class*="box"] {
  background-color: yellow;
}

以上のように、CSSセレクタを使用することで、要素の始まりに基づいて特定の要素を選択することができます。これにより、スタイルや動作を特定の要素に適用することができます。