属性セレクタに対してcssをかける方法

属性セレクタを指定することでタグやid、クラスだけでなく要素にスタイルをかけることができます。

また属性が有り無し、特定の属性や特定の値が含まれたものなど細かく指定することができます。

属性セレクタを使った例をいくつか紹介します。

属性セレクタを指定する

style属性にtextという文字が含まれているときにテキストを中央揃えにします。

<p style="text-align: center;">テキスト</p>

p[style*="text"]{text-align: left;}

テキスト

属性が存在するときに点線のボーダーを指定します。

<p data-txt="text">テキスト</p>

p[data-txt]{border: dashed 1px #eee;}

テキスト

属性の値の最初の文字が一致したら文字を赤にする指定になります。

<p data-color="red">テキスト</p>

<style>p[data-color^=r]{color: red;}</style>

テキスト

属性を使うことでさまざまな指定ができるようになります。

idやクラスにたいして指定することが多いと思いますが属性を使うことでより幅広い指定が可能になります。