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

CSSの[attribute|="value"]セレクターで指定した値から始まる属性を持つ要素を選択する方法

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

CSSの[attribute|="value"]セレクターを使用すると、指定した属性が「特定の値そのもの」、または「その値にハイフン（-）で連結された文字列」で始まる要素を選択できます。主に言語コード（ja-JP など）のマッチングなどで活用されるセレクターです。

例えば[alt |= "Tutor"]と指定した場合、alt="Tutor"やalt="Tutor-Connect"のような属性値を持つ要素が対象になります。

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

サンプルコード

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

実行結果の解説

この例では、alt属性の値が「Tutor」で始まる画像にのみ、オレンジ色の枠線と角丸が適用されます。alt = "Tutor-Connect"は条件に一致するためスタイルが反映されますが、alt = "Tutorials-Library"は「Tutorials」という異なる単語で始まるため、このセレクターでは選択されません。

なお、「指定した値で始まる」すべての要素をより広くマッチさせたい場合は、前方一致を行う[attribute^="value"]セレクターを使用するとよいでしょう。

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

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

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

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