属性を使った指定|パターンマッチ(Pattern matching)

どんな事が出来る?

例えば、aのtarget="_blank"のモノだけにcssを指定したりできる

別ウインドウで開く(アイコンが付く)
このウインドウに開く(アイコン付かない)

html
<a href="index.html" target="_blank">別ウインドウで開く</a>
<a href="index.html">このウインドウに開く</a>
css
a[target="_blank"]{
background:url(../img/ar.png) no-repeat right center;
padding-right:26px;
}

テキストフィールドに指定

html
<input type="text" />
css
input[type="text"] {
border: 1px solid #d6d6d6;
padding: 2px 4px;
}
input[type="text"]:focus {
background-color: #edebff;
border: 1px solid #b2aaf1;
}

 

html
<a href="index.html">内部相対</a>
<a href="http://sakurachiro.com/_exercise/stylesheet/index.html">内部絶対</a>
<a href="http://blog.sakurachiro.com/">外部</a>
css
a[href^="http"]{
background:url(../img/ar.png) no-repeat right center;
padding-right:26px;
}

以下を参考にしたけれど

http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html
E + F E要素の直後に後行するF要素にマッチする。
E[foo] (値に関わらず)foo属性を設定されたE要素にマッチする。
E[foo="warning"] foo属性値が「warning」であるE要素にマッチする。
E[foo~="warning"] foo属性値がコンマで区切られた値のリストであり、そのうち1つが「warning」という値であるようなE要素にマッチする。
E[lang|="en"] lang属性値がハイフンで区切られた値のリストであり、そのリストが「en」という値で始まるE要素にマッチする。
http://www.tagindex.com/stylesheet/basic/format4.html
属性セレクタ 説明
[属性名] 属性名が一致する要素に適用される
[属性名="属性値"] 属性名と属性値が一致する要素に適用される
[属性名~="属性値"] 属性名と属性値が一致する要素に適用される (スペースで区切られた複数の属性値に対応)
[属性名|="属性値"] 属性名と属性値が一致する要素に適用される (ハイフンで区切られた属性値に対応)

E[foo~="warning"]と[属性名~="属性値"]の説明が違う気がする
(前者は’コンマで区切られた値のリスト’、後者は’スペースで区切られた複数の属性値’)

ちなみにhttpから始まるリンクを持つaタグ(<a href="http://foo.foo.com">)にマッチさせるには[属性名^="属性値"](~と^なので混同してた)。

w3c(http://www.w3.org/TR/css3-selectors/#selectors)を見てみると

E[foo^="bar"]

an E element whose "foo" attribute value begins exactly with the string "bar"
(excite翻訳’"foo"属性値がちょうどストリング「バー」で始まるE要素’)

CSS level 3

と書いてある。

つまり前方一致ということ?