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

CSSで特定の単語を含むalt属性を持つ要素を選択する方法（[attribute~=value]セレクタの使い方）

CSSでは、[attribute~="value"]セレクタを使用することで、属性値の中に指定した単語が含まれている要素を選択できます。このセレクタは、属性値がスペース区切りの複数の単語で構成されている場合に特に便利です。

以下の例では、alt属性の値に「Tutorials」という単語が含まれているimg要素だけを選択し、オレンジ色の枠線と角丸を適用しています。

コード例

<!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つの画像が表示されますが、スタイルが適用されるのは1枚だけです。

  • 1枚目の画像：alt属性の値は「Tutor Connect」であり、「Tutorials」という単語を含んでいないため、枠線は適用されません。
  • 2枚目の画像：alt属性の値は「Tutorials Library」であり、「Tutorials」という単語が含まれているため、オレンジ色の枠線と角丸が適用されます。

[attribute~="value"]セレクタの注意点

このセレクタは、属性値をスペースで区切られた単語のリストとして扱います。そのため、次の点に注意が必要です。

  • 部分一致ではなく、完全な1単語として一致するかどうかを判定します。例えば、alt="TutorialLibrary" のようなスペースなしの文字列には一致しません。
  • 大文字・小文字は区別されるため、「tutorials」では「Tutorials」には一致しません。

同様の属性セレクタとしては、前方一致の [attribute^="value"]、後方一致の [attribute$="value"]、部分一致の [attribute*="value"] などもあります。用途に応じて使い分けることで、class名やalt属性などに柔軟なスタイリングを行えます。

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

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

  2. CSSのvisibilityプロパティで要素の表示・非表示を制御する方法

    CSSのvisibility（可視性）プロパティは、ドキュメント内で要素を表示するかどうかを指定するために使用されます。要素自体はレンダリングされますが、visibilityがhiddenに設定されている場合は画面上には表示されません。なお、visibilityと似た役割を持つdisplay: noneとの大きな違いは、hiddenを指定しても要素の占めるスペースは保持されるという点です。レイアウトを崩さずに要素だけを一時的に隠したい場合に非常に便利です。visibilityプロパティで使える値要素の可視性を制御するために指定できる主な値は以下のとおりです。番号値と説明1visibleデフォル