属性セレクタ
CSSの適用先に正規表現を用いることが出来ます。
| 書式 | 適用先 | 記述例 | 解説 |
|---|---|---|---|
| [属性名] | [属性]が指定されている要素全て | img[title] | img要素にtitle属性が指定されている要素 |
| [属性名="属性値"] | 属性値が全体一致 | input[type="submit"] | input要素にtyupe="submit"が指定されている要素 |
| [属性名~="属性値"] | 属性値が含まれる（classを指定した場合、クラスセレクタと同じ） | div[class="sample"] | div要素のclass属性値に"sample"が指定されている要素 |
| [属性名｜="属性値"] | 属性値が含まれる（ハイフン区切り値の前半に対応） | span[lang｜="zh"] | span要素のlang属性値にzhを含む要素 |
| [属性名^="属性値の始め"] | 属性値の文頭が一致 | a[href^="/pc/"] | a要素のhref属性値の文頭が/pc/であるもの |
| [属性名$="属性値の終わり"] | 属性値の末尾が一致 | img[src$=".jpg"] | img要素のsrc属性値の末尾が.jpgであるもの |
| [属性名*="属性値"] | 属性値の一部が一致 | a[href*="mobile"] | a要素のhref属性値にmobileを含むもの全て |
※[属性名|=属性値]の記述がqiitaのマークアップと被ってしまうため全角にしています。