過去バージョン

特定の属性が指定されている要素、特定の属性に特定の値が指定されている要素を適用対象として指定できるのが属性セレクタと言う。

 

属性名の属性が指定されている要素

p[title] { color: #fff; }

 

属性名の属性に属性値の値が指定されている要素①

p[id="main"] { color: #fff; }

 

属性名の属性に属性値の値が指定されている要素②

（属性値として複数の値がスペースで区切られて設定されているような属性に対し、

指定した値が属性値のいずれか一つに一致する要素を対象とする場合）

p[class~="main"] { color: #fff; }

 

属性名の属性に属性値の値が指定されている要素③

（値全体、ハイフン区切りの値の前半が一致する要素が対象。

「en-US」などに使用)

*[lang|="en"] { color: #ff0000; }

 

属性名の属性の値が属性値の始めで始まる要素

img[src^="abc"]{border: 2px; }

 

属性名の属性の値が属性値の終りで終わる要素

img[src$=".jpg"]{border: 2px; }

 

属性名の属性の値が属性値の一部を含む要素

img[src*="/bnr/"] { padding: 1px; }