CSS 属性セレクタ一覧
説明
属性セレクタを使用すると、要素の属性に基づいて要素を選択できます。これにより、class や id を追加することなく、柔軟に要素を選択することができます。
属性セレクタの種類
属性セレクタには、以下のような種類があります。
| セレクタ | 説明 | 例 |
|---|---|---|
| [attr] | 指定した属性を持つ要素を選択します。 | [title] は、title 属性を持つすべての要素を選択します。 |
| [attr=value] | 属性値が指定した値と完全に一致する要素を選択します。 | [target=_blank] は、target 属性の値が _blank である要素を選択します。 |
| [attr~=value] | 属性値が、空白で区切られた単語のリストに、指定した値を含む要素を選択します。 | [class~=warning] は、class 属性の値に warning を含む要素を選択します。例えば、<div class="warning"> や <p class="important warning"> などです。 |
| [attr|=value] | 属性値が指定した値と一致するか、指定した値で始まりハイフン (-) が続く要素を選択します。 | [lang|=en] は、lang 属性の値が en であるか、en- で始まる要素を選択します。例えば、<html lang="en"> や <p lang="en-US"> などです。 |
| [attr^=value] | 属性値が指定した値で始まる要素を選択します。 | [href^="https"] は、href 属性の値が https で始まる要素を選択します。 |
| [attr$=value] | 属性値が指定した値で終わる要素を選択します。 | [src$=".jpg"] は、src 属性の値が .jpg で終わる要素を選択します。 |
| [attr*=value] | 属性値が指定した値を含む要素を選択します。 | [href*="example"] は、href 属性の値に example を含む要素を選択します。 |
| [attr operator value i] | 上記のセレクタと同じですが、大文字と小文字を区別せずにマッチングを行います。 | [lang|=en i] は、lang 属性の値が en、En、eN、または EN である要素、およびこれらの値で始まりハイフン (-) が続く要素を選択します。 |
使用例
以下は、属性セレクタの使用例です。
例1：target="_blank" を持つすべてのリンクをスタイリングする。
html
<a href="https://www.example.com" target="_blank">外部リンク</a>
css
a[target="_blank"] {
color: blue;
text-decoration: underline;
}
例2：class 属性に "warning" を含むすべての要素に赤い枠線を追加する。
```html
重要な警告
```
css
[class~=warning] {
border: 1px solid red;
}
注意
- 属性値は、識別子（英字、数字、ハイフン (-)、アンダースコア (_) のみを含む）でない限り、引用符で囲む必要があります。
- 属性セレクタは大文字と小文字を区別します。大文字と小文字を区別しないマッチングを行う場合は、
i修飾子を使用します。
参考資料
Q&A
Q1: 属性セレクタとクラスセレクタの違いは何ですか？
A1: 属性セレクタは、要素の属性に基づいて要素を選択します。一方、クラスセレクタは、要素の class 属性の値に基づいて要素を選択します。
Q2: 複数の属性セレクタを組み合わせることはできますか？
A2: はい、複数の属性セレクタを組み合わせることができます。例えば、[title][href^="https"] は、title 属性を持ち、href 属性の値が https で始まる要素を選択します。
Q3: 属性セレクタは、すべてのブラウザでサポートされていますか？
A3: はい、属性セレクタは、すべての主要なブラウザでサポートされています。ただし、古いブラウザでは、一部の属性セレクタがサポートされていない場合があります。