【属性セレクタE[foo]】指定した属性を持つ要素に適用

要素名[属性名]の形式の属性セレクタでは、指定した属性を持つ要素に対してスタイルを適用することができます。 例えばh1[title]{}というように指定した場合であれば、title属性を持っているh1に対してスタイルが適用されます。

このように要素名[属性名]の形式の属性セレクタ(E[foo])では、[属性名]で示した属性が指定されている要素に対してのみスタイルを適用します。

また要素名[属性名][属性名]というように、複数の属性を指定することもできます。 この場合、指定した属性を両方とも持っている場合にスタイルが適用されます。

※どちらの指定方法も属性が指定されていない場合は適用されません。

なおE[foo]の指定方法では、属性の値に「何が指定されているか」は関係ありません。

書式

  • 要素名[属性名] {プロパティ名:値;} ……… 指定した属性を持つ要素に対してスタイルを適用

使用した時の例

p[title] {color: red;}
p[class][id] {text-decoration:underline;}
<p title="title属性の部分">文字が赤色になります</p>
<p class="sample1" id="sample2">class属性とid属性を指定しています</p>

ブラウザ上の表示例

文字が赤色になります

class属性とid属性を指定しています

対応ブラウザなどのデータ

適用対象 指定した属性を持つ指定の要素
対応ブラウザ Internet Explorer , Google Chrome , Firefox , Opera , Safari

関連情報