属性セレクタの指定方法を７つご紹介します。
| 属性セレクタ | 説明 |
|---|---|
| A［属性名］ | 属性名が一致する要素に適用される |
| A［属性名＝”属性値”］ | 属性名と属性値が一致する要素に適用される |
| A［属性名~＝”属性値”］ | 属性名と属性値が一致する要素に適用される （空白で区切られた複数の属性値にでも適用） |
| A［属性名|＝”属性値”］ | 属性名と属性値が一致する要素に適用される （ハイフンで区切られた属性値にでも適用） |
| A［属性名＾＝”文字列”］ | 属性名と指定した文字列から始まる要素に適用される |
| A［属性名$＝”文字列”］ | 属性名と指定した文字列で終わる要素に適用される |
| A［属性名*＝”文字列”］ | 属性名と指定した文字列を含む要素に適用される |
A［属性名］
属性名が一致する要素に適用される
<p>テキスト</p>
<p class="test">テキスト</p>p[class] {
color: red;
}テキスト
テキスト
A［属性名＝”属性値”］
属性名と属性値が一致する要素に適用される
<p>テキスト</p>
<p class="test01">テキスト</p>
<p class="test02">テキスト</p>p[class="test01"] {
color: red;
}テキスト
テキスト
テキスト
A［属性名~＝”属性値”］
属性名と属性値が一致する要素に適用される（空白で区切られた複数の属性値にでも適用）
<p>テキスト</p>
<p class="test01">テキスト</p>
<p class="test02">テキスト</p>
<p class="test01 test03">テキスト</p>p[class~="test01"] {
color: red;
}テキスト
テキスト
テキスト
テキスト
A［属性名|＝”属性値”］
属性名と属性値が一致する要素に適用される（ハイフンで区切られた属性値にでも適用）
<p>テキスト</p>
<p class="test01">テキスト</p>
<p class="test02">テキスト</p>
<p class="test01 test03">テキスト</p>
<p class="test01-test03">テキスト</p>p[class|="test01"] {
color: red;
}テキスト
テキスト
テキスト
テキスト ←適用されない
テキスト
A［属性名＾＝”文字列”］
属性名と指定した文字列から始まる要素に適用される
<p>テキスト</p>
<p class="test01">テキスト</p>
<p class="test02">テキスト</p>
<p class="test03">テキスト</p>p[class^="test"] {
color: red;
}テキスト
テキスト
テキスト
テキスト
A［属性名$＝”文字列”］
属性名と指定した文字列で終わる要素に適用される
<p>テキスト</p>
<p class="test01">テキスト</p>
<p class="test02">テキスト</p>
<p class="test03">テキスト</p>p[class$="01"] {
color: red;
}テキスト
テキスト
テキスト
テキスト
A［属性名*＝”文字列”］
属性名と指定した文字列を含む要素に適用される
<p>テキスト</p>
<p class="test001">テキスト</p>
<p class="test002">テキスト</p>
<p class="test003">テキスト</p>
<p class="test010">テキスト</p>p[class＊="00"] {
color: red;
}テキスト
テキスト
テキスト
テキスト
テキスト
