スポンサード リンク
属性セレクタ
属性がついているHTMLの要素にスタイルを適用できます対応ブラウザ |
使い方(書式)4つあります。どれも要素と[属性名]の間に空白を入れられません
要素名[属性名] { プロパティ : 値; } /* 要素名[属性名]が一致した要素にスタイルを適用 */
要素名[属性名="値"] { プロパティ : 値; } /* 要素名[属性名="値"]が全て一致した要素にスタイルを適用 */
要素名[属性名~="値"] { プロパティ : 値; } /* プロパティの値に半角の空白で区切られた値があるときに使用 */
要素名[属性名|="値"] { プロパティ : 値; } /* プロパティの値にハイフンで区切られた値があるときに使用 */最初に要素の指定、その要素の属性を[ ]で囲んでスタイルを適用する要素を指定
実際の指定方法
cssファイル [name="hoge"]属性と値が付いたTEXTAREA要素にスタイルを適用(横幅を500pxに指定)
textarea[name="hoge"] { width:500px;}
html部分(フォームの部品TEXTAREA要素にname="hoge"の属性と値をつけています)
<TEXTAREA name="hoge">テキストエリア</TEXTAREA>
実際の表示
優先順位
※属性セレクタは、要素1ポイント+属性セレクタ10ポイントですtextarea[name="hoge"] { width:500px;} /* この場合は、要素1つと属性セレクタなので1+10=11ポイント [name="hoge"]この部分が10ポイントです*/ textarea.hoge { width:200px;} /* classセレクタと同じにポイントになります。1+10=11ポイント */
※ポイント一覧表
idセレクタ | 100ポイント |
class、擬似クラス、属性セレクタ、id以外のセレクタ | 10ポイント |
要素のみ(要素2個だと2ポイント) | 1ポイント |
全称セレクタ | 0ポイント |