CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで属性値に指定した値が含まれる要素を選択する方法

CSSの [attribute*="value"] セレクターとは

属性値の中に指定した文字列が含まれている要素を選択したい場合は、CSSの [attribute*="value"] セレクターを使用します。このセレクターは部分一致による選択を行うため、属性値の先頭・末尾・途中のいずれかに指定した値が含まれていれば、その要素にスタイルを適用できます。

例えば [alt*="tut"] と指定すれば、「tut」という文字列が alt 属性の値に含まれるすべての画像が対象になります。

サンプルコード

以下のコードを実行して、CSSの [attribute*="value"] セレクターの動作を実際に確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <style>
         [alt* = "tut"] {
            border: 5px solid orange;
            border-radius: 5px;
         }
      </style>
   </head>
   <body>
      <img src = "https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg" height="200" width="200" alt="tutor">
      <img src = "https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" height="200" width="200" alt="my tutorials">
   </body>
</html>

実行結果のポイント

上記の例では、2つの画像の alt 属性の値（tutor と my tutorials）に、どちらも「tut」という文字列が含まれています。そのため、両方の画像にオレンジ色の5pxの枠線と角丸（border-radius）が適用されます。

関連する属性セレクター

部分一致以外にも、目的に応じて使い分けられる属性セレクターがあります。

  • [attribute^="value"]：属性値が指定した値で始まる要素（前方一致）
  • [attribute$="value"]：属性値が指定した値で終わる要素（後方一致）
  • [attribute~="value"]：空白区切りの単語のひとつとして指定した値と完全一致する要素

用途に合わせてこれらのセレクターを使い分けることで、class名やファイル名などに柔軟にスタイルを適用できます。

  1. CSSの:validセレクターで有効な値を持つinput要素をスタイリングする方法

    CSSの:validセレクターを使用すると、有効な値が入力されたすべての<input>要素に対してスタイルを適用できます。 :validセレクターとは :validセレクターは、フォームの入力内容がバリデーション（妥当性チェック）を通過した場合にのみスタイルを適用する擬似クラスです。たとえば、type=emailの入力欄に正しい形式のメールアドレスが入力されたときだけ、背景色や文字色を変えるといった使い方ができます。逆に、無効な値が入力された場合にスタイルを適用したい場合は「:invalid」セレクターを使用します。両者を組み合わせることで、ユーザーに入力の正誤を視覚的にフィードバ

  2. CSSで指定した単語を含む属性値を持つ要素を選択する方法

    CSSの [属性名 ~= 値] セレクターを使用すると、属性値の中に指定した単語が含まれる要素だけを選択できます。 このセレクターは、属性値が空白文字で区切られた複数の単語で構成されている場合に、その中に指定した単語が「独立した1つの単語」として含まれているかどうかを判定します。そのため、部分文字列として一致するだけでは選択されない点に注意してください。 次のサンプルコードでは、alt 属性に「Tutorials」という単語を含む画像に対して、オレンジ色の枠線と角丸を適用しています。 サンプルコード <!DOCTYPE html> <html> <head