CSS: 属性selectorを無視

htmlの各要素には属性値があります。これらには規定値が設定されている場合があり、CSSの属性selectorと組み合わせるとどうなるのでしょうか…。結論から申し上げますと、CSSでは無視されるようです。

input

type属性の規定値のtextです。cssで文字色を赤に設定。ド突くと規定値表示

<style>input[type=text]{color:red}</style>
<input onfocus=value=type>
<input onfocus=value=type type=text>

type=text等のinput要素のvalueの規定値は空文字。しかしtagに記述しておかないとやはり適用されず、なんと動的に設定しても適用されません(最後のinput要素)

<style>input[value]{color:red}</style>
<input>
<input value>
<input value="">
<input value=text>
<input onfocus=value=type type=text>

button

type属性の規定値はsubmit。cssで文字色をaquaに設定。ド突くと規定値表示

<style>button[type=submit]{color:aqua}</style>
<button onfocus=innerText=type>&nbsp;</button>
<button onfocus=innerText=type type=submit>&nbsp;</button>

他の要素

一般属性であるid、class、title等の規定値は空文字。だからと言って全要素に適用されてはたまったものではありません。さすがにtagに明示的に設定しておかないと適用されません

css

[id]{color:red}
[class]{color:gold}
[title]{color:aqua}

以下はほぼ?同じ意味となる

css

[id=""]{color:red}
[class=""]{color:gold}
[title=""]{color:aqua}

空文字で始まる場合も、属性持ちの全要素に適用される……わけがありません。なんと該当要素皆無。

css

[id^=""]{color:red}
[class^=""]{color:gold}
[title^=""]{color:aqua}

続いてhtml

html

<a id>適用</a> <a id="">適用</a> <a id=a>適用</a>
<a>不適用</a>