要素だけを選択してスタイリングできます。基本構文から実装例、関連セレクターまでわかりやすく解説します。">
CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの[attribute$="value"]セレクターでhref属性値が.htmで終わる要素を選択する方法

CSSでは、[attribute$="value"]セレクターを使用することで、指定した値で属性値が終わる要素を選択できます。今回の例では、href属性の値が「.htm」で終わるすべての<a>要素を対象にします。

このセレクターは、特定の拡張子を持つリンクだけをスタイリングしたい場合に非常に便利です。たとえば、PDFファイルへのリンクとHTMLページへのリンクを見分けて、視覚的に区別したいときなどに活用できます。

[attribute$="value"]セレクターの基本構文

[属性名$ = "値"] {
  /* スタイル */
}

「$=」は「〜で終わる」という意味を持ちます。つまり、属性値の末尾が指定した文字列と一致する要素のみが選択されます。

実装例

以下のコードを実行すると、href属性の値が「htm」で終わるリンクにだけオレンジ色の枠線が適用され、PDFファイルへのリンクには適用されません。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <style>
      [href$ = htm] {
        border: 5px solid orange;
        border-radius: 5px;
      }
   </style>
  </head>
  <body>
    <a href = "https://tutorialspoint.com/java/index.htm">Javaチュートリアル</a>
    <a href = "https://www.tutorialspoint.com/java/java_tutorial.pdf">JavaチュートリアルPDF</a>
  </body>
</html>

実行結果のポイント

上記の例では、「index.htm」で終わるURLを持つ1つ目のリンクにのみ、オレンジ色の枠線と角丸のスタイルが適用されます。「java_tutorial.pdf」で終わる2つ目のリンクには、スタイルが反映されません。

関連する属性セレクター

  • [attribute^="value"] … 属性値が指定した値で始まる要素を選択
  • [attribute*="value"] … 属性値に指定した値が含まれる要素を選択
  • [attribute~="value"] … 属性値に指定した単語（スペース区切り）が含まれる要素を選択

これらのセレクターを使い分けることで、JavaScriptを使わずにCSSだけで柔軟な条件付きスタイリングが実現できます。

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

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

  2. CSSのattr()関数で選択した要素の属性値を取得・表示する方法

    CSSには、HTML要素が持つ属性の値を動的に取得して表示できるattr()関数が用意されています。attr()は主にcontentプロパティと組み合わせて使用され、リンク先URLやカスタムデータ属性などの値を、CSSだけで画面上に反映させることができます。 attr()関数の基本的な使い方 attr()関数の構文は非常にシンプルです。 attr(属性名) 引数に指定した属性の値が文字列として返され、::beforeや::after疑似要素のcontentプロパティなどで利用できます。これにより、HTMLを変更することなく、属性の内容を自動的に表示に組み込むことが可能になります。 実装例：リン