属性（attribute）を利用したCSSセレクタ。混乱してどれを使うかわからなくなることがあるので備忘録でまとめておきます。
属性セレクタとは
解説サイトなどでは[attr]や [attr = value]のような書き方をされています。
attr とは属性(attribute)を意味しており、href・title・type・altなど、HTMLタグの属性を利用するCSSセレクタです。
属性セレクタの構文と使用例
[attr]
その属性をもつ要素すべてを指定する。
[href]{
color: red;
}
/* 結果 */
href属性をもつ全てが赤色になる[attr = value]
属性の値がvalueに完全に一致する要素を指定。
[href="hoge.html"]{
font-size:2em;
}
/* 結果 */
hoge.htmlへのリンクテキストが2emになる[attr~= value]
属性の値がvalueに完全に一致する要素を指定。
[attr=value] との違いとして、空白区切りのリストなど複数のvalueがあるとき、その内１つに一致すれば対応。
[title="hoge"]{
color: red;
}
[title~="hoge"]{
border:1x solid;
}
/* 結果 */
<a title="hoge hage">文字は赤くならないが、枠線はつく</a>
<a title="hoge">文字が赤くなるし、枠線もつく</a>
[attr^= value]
属性の値がvalueではじまる要素を指定。下の例はページ内リンクをすべて指定する。
[href^= "#"]{
text-decoration:underline wavy;
}
/* 結果 */
「#」から始まるリンクに下線がつく[attr$= value]
属性の値がvalueで終わる要素を指定。
[alt$= "サムネイル"]{
max-width: 120px;
}
/* 結果 */
altが「サムネイル」でおわるimgのmax-widthが120pxになる[attr*= value]
属性の値が、valueを1つ以上含む要素を指定します
[href*= "mihune-web"]{
font-weight:600;
}
/* 結果 */
リンクURLのどこかに「mihune-web」が入っていると太字[attr|= value]
属性がvalueに一致する要素と、valueから始まり直後にハイフン（-）がつく要素を指定します。
文字のサブコード指定などに利用されます。例だと、en-US en-AU en-SGなどが全て対象となります。
[lang|="en"]{
color: crimson;
}
