CSSセレクタ contains

CSS 属性セレクタ

この文章では、HTML 要素の属性に基づいて要素を選択するために使用される CSS 属性セレクタについて解説します。属性の存在、値の完全一致、部分一致など、さまざまな条件で要素を選択する方法を紹介します。

属性存在セレクタ

[attr] セレクタは、指定された属性を持つ要素を選択します。属性値は問いません。

例


<a href="https://www.example.com">リンク</a>
<span data-info="サンプル">データ</span>

a[href] は、href 属性を持つすべての <a> 要素を選択します。

[data-info] は、data-info 属性を持つすべての要素を選択します。

属性値一致セレクタ

[attr=value] セレクタは、指定された属性を持ち、その値が完全に一致する要素を選択します。

例


<input type="text" name="username">
<input type="password" name="password">

input[type="password"] は、type 属性が "password" である <input> 要素を選択します。

属性値部分一致セレクタ

[attr~=value] セレクタは、指定された属性を持ち、その値に指定された単語（スペース区切り）を含む要素を選択します。

例


<div class="box red">赤いボックス</div>
<div class="box blue large">青い大きなボックス</div>

div[class~=red] は、class 属性に "red" という単語を含む <div> 要素を選択します。

属性値開始文字列一致セレクタ

[attr|=value] セレクタは、指定された属性を持ち、その値が指定された文字列で始まるか、指定された文字列の後にハイフン (-) が続く要素を選択します。

例


<p lang="en">英語</p>
<p lang="en-US">アメリカ英語</p>

p[lang|=en] は、lang 属性が "en" で始まるか "en-" で始まる <p> 要素を選択します。

属性値開始文字列包含セレクタ

[attr^=value] セレクタは、指定された属性を持ち、その値が指定された文字列で始まる要素を選択します。

例


<img src="image/cat.jpg" alt="猫の画像">
<img src="https://example.com/dog.webp" alt="犬の画像">

img[src^="https"] は、src 属性が "https" で始まる <img> 要素を選択します。

属性値末尾文字列包含セレクタ

[attr$=value] セレクタは、指定された属性を持ち、その値が指定された文字列で終わる要素を選択します。

例


<script src="script.js"></script>
<link rel="stylesheet" href="style.css">

[href$=".css"] は、href 属性が ".css" で終わる要素を選択します。

属性値部分文字列包含セレクタ

[attr*=value] セレクタは、指定された属性を持ち、その値に指定された文字列を含む要素を選択します。

例


<a href="https://ja.wikipedia.org/wiki/猫">猫 - Wikipedia</a>
<a href="https://www.google.com/search?q=犬">犬の検索結果 - Google 検索</a>

a[href*="wikipedia"] は、href 属性に "wikipedia" を含む <a> 要素を選択します。

大文字と小文字の区別

デフォルトでは、属性セレクタは大文字と小文字を区別しません。大文字と小文字を区別する場合は、s 識別子を使用します。

例


<input type="text" name="userName">

input[name="username"] は、大文字と小文字を区別しないため、要素を選択します。

input[name="userName" s] は、大文字と小文字を区別するため、要素を選択しません。

名前空間

デフォルトでは、属性セレクタは名前空間を考慮しません。特定の名前空間の属性を選択するには、名前空間プレフィックスを使用します。

例


<svg xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="https://www.example.com">リンク</a>
</svg>

a[xlink|href="https://www.example.com"] は、xlink 名前空間の href 属性が "https://www.example.com" である <a> 要素を選択します。

注意事項

属性セレクタは、クラスセレクタや ID セレクタに比べてパフォーマンスが劣る場合があります。パフォーマンスが重要な場合は、可能な限りクラスセレクタや ID セレクタを使用してください。
属性セレクタは強力な機能ですが、使いすぎると CSS が複雑になり、保守が難しくなる可能性があります。適切な場面で使用してください。

まとめ

この記事では、CSS 属性セレクタについて解説しました。属性セレクタは、HTML 要素の属性に基づいて要素を選択するための強力な機能です。属性の存在、値の完全一致、部分一致など、さまざまな条件で要素を選択することができます。

属性セレクタを使用する際は、パフォーマンスと保守性に注意してください。