属性セレクタ

以下の全ての属性セレクタはau以外の携帯で表示確認できました。古い機種はサポートされていない模様です。
属性セレクタと言ってもid属性やclass属性を使う必要性はありません。
要素名[属性名]
要素の中でもその属性名を持つ要素に対してスタイルを適用する。
属性値は問わない。
input[type]{
    プロパティ:値;
    }

<input type="text" />
<input type="value" />
表示確認用サンプル
要素名[属性名="値"]
要素の中でもその属性名と属性値を持つ要素に対してスタイルを適用する。
input[type="text"]{
    プロパティ:値;
    }

<input type="text" />
<input type="value" />
表示確認用サンプル
要素名[属性名~="値"]
要素の中でもその属性名を持ち、属性値が空半角スペース区切りで複数指定されている場合で、その属性値が含まれる要素に対してスタイルを適用する。
p[class~="example"]{
    プロパティ:値;
    }

<p class="w3c lang example">HTML文書サンプル
表示確認用サンプル
要素名[属性名|="値"]
要素の中でもその属性名を持ち、属性値が「-」区切りで複数指定されている場合に、その属性値が前方一致で含まれている要素に対してスタイルを適用する。
span[lang|="en"]{
    プロパティ:値;
    }

<span lang="en-US">Among the elements with its attributes
<span lang"ja">要素の中でもその属性を持つ
表示確認用サンプル


TOPへ おタグるーむ