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.png" 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 要素の属性に基づいて要素を選択するための強力な機能です。属性の存在、値の完全一致、部分一致など、さまざまな条件で要素を選択することができます。
属性セレクタを使用する際は、パフォーマンスと保守性に注意してください。
関連QA
Q1: 属性セレクタとクラスセレクタの違いは何ですか？
A1: 属性セレクタは要素の属性に基づいて要素を選択するのに対し、クラスセレクタは要素の class 属性の値に基づいて要素を選択します。一般的に、クラスセレクタの方がパフォーマンスに優れています。
Q2: 属性セレクタを使用して、特定の属性を持たない要素を選択できますか？
A2: はい、:not() セレクタを使用することで、特定の属性を持たない要素を選択できます。 例えば、a:not([href]) は、href 属性を持たない <a> 要素を選択します。
Q3: 属性セレクタは、すべてのブラウザでサポートされていますか？
A3: ほとんどのモダンブラウザでは、属性セレクタがサポートされています。ただし、古いブラウザの中には、サポートしていないものもあります。