【CSS】属性セレクタを使用する - ただ日々を記すもの

こちらのhtmlを元に属性セレクタを使用していきます。

<body>
  <p>
    <a href="http://google.com">Googleへ</a>
  </p>
  <p>
    <a href="http://yahoo.co.jp" title="yahoo" class="search link">Yahoo!へ</a>
  </p>
</body>

タイトルを指定

a[title] {
  color: red;
}

これでtitle属性をもつaタグにスタイルが適用されます。
今回は、「Yahoo!へ」のみが赤色になります。

属性の値を指定する

a[title="yahoo"] {
  color: red;
}

これで「yahoo」というtitle属性をもつaタグにスタイルが適用されます。
こちらも、「Yahoo!へ」のみが赤色になります。

属性の値を指定する 2

a[class~="search"] {
  color: red;
}

先ほどは、属性の値を完全一致で指定しましたが、
今回は、属性の値に条件に合致するものが含まれていればスタイルが適用されます。
~を指定することで、今回は search というクラス名含む「Yahooへ!」が赤色になります。