属性（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] と同じように見えるが違いが出るのは複数classをもつ要素など空白区切りで複数の値があるとき、その内１つに一致すれば対応。

<style>
  [title="hoge"]{
    color: red; 
  }
  [title~="hoge"]{
    border:1x solid;
  }
</style>

<!-- 結果 -->
<a title="hoge another-title">文字は赤くならない。枠線はつく</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;
  }