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

【CSS】属性値が指定した値で始まる要素を選択するセレクタの使い方

属性セレクタ [attribute^="value"] とは

CSSにおいて、属性値が指定した値で始まる要素だけを選択したい場合は、[attribute^="value"] セレクタを使用します。

このセレクタを活用すると、「alt属性が特定の文字列で始まる画像にだけ枠線を付ける」といった条件付きのスタイル指定が簡単に行えます。

実装例

以下のコードでは、[attribute^="value"] セレクタを使って、alt属性が「Tutor」で始まる画像に青色の枠線と角丸を適用しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         [alt^=Tutor] {
            border: 5px solid blue;
            border-radius: 5px;
         }
      </style>
   </head>
   <body>
      <img src = "https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg" height="200" width="200" alt="Tutor Connect">
      <img src = "https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" height="200" width="200" alt="Tutorials Library">
   </body>
</html>

コードのポイント

[alt^=Tutor] のように記述することで、alt属性の値が「Tutor」という文字列で始まる要素が選択対象になります。先頭一致の条件なので、途中に含まれているだけではマッチしない点に注意しましょう。

なお、類似の属性セレクタとして、属性値が指定した値で終わる要素を選択する [attribute$="value"]、属性値に指定した値が含まれる要素を選択する [attribute*="value"] などもあります。用途に応じて使い分けると便利です。

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

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

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

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