属性と属性値に基づいて要素を選択することは非常に強力です。

これにより、属性の存在がチェックされます。

a[title] {
  background-color: yellow;
}

そして、これは特定の値を持つ属性をチェックします：

a[target="_blank"] {
  background-color: hotpink;
}

しかし、待ってください、もっとあります！

あなたはもっとたくさんすることができます：

  • [attribute〜=“ foo”]：値にfooという単語が含まれているかどうかを確認します。
  • [attribute | =“ foo”]：値が単語fooで始まるかどうかをチェックします。
  • [attribute ^ =“ foo”]：値が文字fooで始まるかどうかをチェックします。
  • [attribute $ =“ foo”]：値がfooで終わるかどうかをチェックします。
  • [attribute * =“ foo”]：値に文字fooが含まれているかどうかを確認します。