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

CSSでalt属性値が「Tutor」で始まるすべてのimg要素を選択する方法

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

CSSの [属性|="値"] セレクターを使用すると、指定した属性が特定の値、またはその値にハイフン（-）が続く形で始まる要素のみを選択できます。

このセレクターは、同じ種類の複数の要素の中から、属性値のパターンに合致するものだけにスタイルを適用したい場合に非常に便利です。

実装例

以下のコードを実行して、CSSの [attribute|="value"] セレクターの動作を確認してみましょう。この例では、alt 属性の値が「Tutor」で始まる画像（img要素）に対して、オレンジ色の枠線と角丸を適用しています。

<!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>

このコードでは、1つ目の画像の alt 属性値は「Tutor-Connect」であるため「Tutor」で始まり、オレンジ色の枠線が適用されます。一方、2つ目の画像の alt 属性値は「Tutorials-Library」であり、「Tutor」の後にハイフンが続いていないため、スタイルは適用されません。

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

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

  2. CSSで<p>要素の後に続くすべての<ul>要素を選択する方法

    CSSで<p>要素の後に続くすべての<ul>要素を選択する方法CSSの一般兄弟結合子（~）を使うと、<p>要素よりも後に出現するすべての兄弟要素である<ul>要素をまとめて選択できます。この記事では、「p ~ ul」セレクタの基本的な考え方と、実際に動作するコード例をわかりやすく解説します。セレクタの基本構文p ~ ul {   color: white;   background-color: blue; }このセレクタは、<p>要素と同じ親要素を持ち、かつ<p>要素の後ろに位置す