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

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

属性値が指定した値で終わる要素を選択するには

CSS では、属性の値が特定の文字列で終わっている要素だけを選択したい場合に、[attribute$="value"] セレクタを使用します。

このセレクタは、属性値の末尾が指定した値と一致するかどうかを判定します。たとえば、画像の alt 属性が特定のキーワードで終わっている要素にだけスタイルを適用したい場合などに便利です。

以下は、CSS の [attribute$="value"] セレクタを実装したサンプルコードです。alt 属性が「Connect」で終わる画像にのみ、青色の枠線と角丸が適用されます。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         [alt$="Connect"] {
            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>

上記の例では、1つ目の画像（alt = "Tutor Connect"）は値が「Connect」で終わっているため枠線が表示され、2つ目の画像（alt = "Tutorials Library"）にはスタイルが適用されません。

類似の属性セレクタとの違い

  • [attribute^="value"]：属性値が指定した値で始まる要素を選択
  • [attribute*="value"]：属性値に指定した値が含まれる要素を選択
  • [attribute$="value"]：属性値が指定した値で終わる要素を選択

用途に応じてこれらのセレクタを使い分けることで、より柔軟なスタイリングが可能になります。

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

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

  2. CSSのfloatプロパティで要素をフロート(回り込み)させる方法

    CSSのfloatプロパティとはCSSのfloatプロパティは、ボックスやコンテンツを配置・整形するために使用されるプロパティです。開発者はfloatを活用することで、要素をコンテナの左側または右側に寄せて配置できます。floatプロパティには、以下のいずれかの値を指定できます。left − 要素がコンテナの左側に浮動しますright − 要素がコンテナの右側に浮動しますnone − 要素は浮動しません(デフォルト値)inherit − 親要素のfloat値を継承しますなお、floatを指定すると後続の要素が回り込むため、レイアウトによってはclearプロパティで回り込みを解除する必要がある点