CSS [attribute=value]選択子

定義と使用方法

CSS [attribute=value] 選択子は、指定された属性とその属性値が完全に一致する要素を選択するために使用されます。

インスタンス

例1

target="_blank"のすべての<a>要素のスタイルを選択し設定します。同時にlang="it"のすべての<p>要素のスタイルを選択し設定します：

a[target="_blank"] {
  background-color: yellow;
}
p[lang="it"] {
  background-color: salmon;
}

実際に試してみてください

例2

<input type="text">要素の幅を100pxに設定します。しかし、フォーカスを取得したときには、幅を250pxに設定します：

input[type="text"] {
  width: 100px;
}
input[type="text"]:focus {
  width: 250px;
}

実際に試してみてください

CSS文法

[attribute = value] {
  css declarations;
}

技術的詳細

ブラウザのサポート

テーブルの数字は、その選択子を完全にサポートする最初のブラウザのバージョンを示しています。