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

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

CSSの [属性名 ~= "値"] セレクターを使用すると、属性値の中に指定した単語が含まれる要素だけを選択できます。

このセレクターは、属性値が空白文字で区切られた複数の単語で構成されている場合に、その中に指定した単語が「独立した1つの単語」として含まれているかどうかを判定します。そのため、部分文字列として一致するだけでは選択されない点に注意してください。

次のサンプルコードでは、alt 属性に「Tutorials」という単語を含む画像に対して、オレンジ色の枠線と角丸を適用しています。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         [alt ~= Tutorials] {
            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 Connect">
      <img src = "https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" height = "200" width="200" alt = "Tutorials Library">
   </body>
</html>

実行結果のポイント

この例では、2つ目の画像（alt="Tutorials Library"）は「Tutorials」という単語を含んでいるため枠線が表示されます。一方、1つ目の画像（alt="Tutor Connect"）は該当しないため、スタイルは適用されません。

補足：「~=」と「*=」の違い

似たセレクターに [属性名 *= "値"] がありますが、こちらは部分文字列一致を行います。たとえば [alt *= "Tutor"] は「Tutor Connect」にも「Tutorials Library」にもマッチします。単語単位で厳密に判定したい場合は「~=」を、文字列の一部分でも構わずマッチさせたい場合は「*=」を使い分けるとよいでしょう。

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

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

  2. CSSでレスポンシブなフローティング要素を作成する方法【初心者向け解説】

    CSSでレスポンシブ対応のフローティング（回り込み）要素を作成するには、float プロパティと @media（メディアクエリ）を組み合わせます。これにより、画面幅に応じて要素の左右配置を動的に切り替えることができます。 サンプルコード 以下のコードは、画面サイズに応じてfloatの方向が入れ替わるレスポンシブなレイアウトの実装例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale