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

【CSS】href属性値に「java」を含むすべてのa要素を選択する[attribute*="value"]セレクタの使い方

href属性値に部分文字列「java」を含む<a>要素を選択する方法

CSSの [attribute*="value"] セレクタを使用すると、属性値の中に指定した文字列（部分文字列）が含まれている要素をすべて選択できます。

たとえば、href 属性の値に「java」という文字列が含まれているすべての <a> 要素にスタイルを適用したい場合は、[href*="java"] のように記述します。

サンプルコード

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

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

実行結果のポイント

上記の例では、2つのリンクのうち「Javaチュートリアル」へのリンクだけが、href 属性値に「java」を含んでいるため、オレンジ色の枠線と角丸のスタイルが適用されます。一方、「PHPチュートリアル」のリンクには該当する文字列が含まれていないため、スタイルは反映されません。

補足

セレクタの値は引用符で囲んで [href*="java"] と記述するのが一般的です。また、大文字と小文字を区別せずにマッチさせたい場合は、i フラグを付けた [href*="java" i] を使用することもできます。

  1. CSSの:only-childセレクターを使って、親の唯一の子であるすべての<p>要素にスタイルを適用する方法

    CSSの:only-childセレクターを使用すると、親要素内で唯一の子要素として存在する<p>要素だけを選択し、スタイルを適用することができます。兄弟要素が1つでも存在する場合、その要素は対象外となるため、特定の構造を持つHTMLに対してピンポイントでデザインを指定したいときに非常に便利です。 :only-childセレクターの基本構文 p:only-child { /* スタイルの指定 */ } 実装例 以下のコードでは、2つの<div>要素の中に<p>タグが配置されています。最初の<div>には<p>要素が1つだけ含まれてい

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

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