前方一致？後方一致？とっても便利な属性セレクタまとめ
セレクタは色々ありますが、最近コーディングをするのに属性セレクタをよく使うので改めてまとめておきたいと思います。
input要素に対してよく使う人を見かけますが、さまざまな要素に使えるので是非覚えておきましょう。
目次
属性セレクタってなぁに
属性セレクタとはhtml上の属性の値や有無を元にcss上で様々な指定ができるものです
classを使わなくても指定ができるのがメリット。
IE8でも使えるのも嬉しいところです
基本の属性セレクタ
要素名[属性名] / E[foo]
/* pにclassがついている場合の指定 */
p[class] { margin:0; }
特定の属性と属性値のみをもつ要素指定型
要素名[属性名=”属性値”] / E[foo=”bar”]
/* pのclass名がsampleの場合の指定 */
p[class="sample"] { color:#666; }
/* inputのtype属性の値がtextの場合の指定 */
input[type="text"] { font-size:16px; }
特定の属性から指定の属性値を含む場合の指定の仕方
class名を複数かけている場合場合などに有効要素名[属性名~=”属性値”] / E[foo~=”bar”]
<p class="test sample demo">class名が複数</p>
/* pのclass名がsampleを含む要素の指定 */
p[class~="sample"] { color:#666; }
特定の属性からハイフンで区切られたハイフンの前の値が指定の属性値を含む場合の指定の仕方
class名にルールを用いて、prefixをつけている場合などに有効要素名[属性名|=”属性値”] / E[foo|=”bar”]
<p class="sample">class名</p> <p class="sample-text">ハイフンで区切られたclass名</p>
/* pのclass名の中のハイフンの前がsample、もしくは完全一致でsampleに対しての指定 */
p[class|="sample"] { color:#666; }
[前方一致] 特定の属性から指定の属性値で始まる場合の指定の仕方
連番のclass名なんかを指定するとき一括で指定できて有効要素名[属性名^=”属性値”] / E[foo^=”bar”]
<p class="sample">class名 完全一致</p> <p class="sample1">指定のclass名から始まる場合</p> <p class="sampleText">指定のclass名から始まる場合</p>
/* pのclass名がsampleから始まる場合の指定 */
p[class^="sample"] { color:#666; }
[後方一致] 特定の属性から指定の属性値で終わる場合の指定の仕方
要素名[属性名$=”属性値”] / E[foo$=”bar”]<p class="sample">class名 完全一致</p> <p class="test-sample">class名の中に指定の値を内包</p>
/* pのclass名がsampleで終わる場合の指定 */
p[class$="sample"] { color:#666; }
p[class$="text-sample"] { color:#666; }
[部分一致] 特定の属性から指定の属性値が含まれる場合の指定の仕方
要素名[属性名*=”属性値”] / E[foo*=”bar”]<p class="sample">class名 完全一致</p> <p class="text-sample-1">class名の中に指定の値を内包</p> <p class="text-sampleClass">class名の中に指定の値を内包</p>
/* pのclass名がsampleで終わる場合の指定 */
p[class*="sample"] { color:#666; }
p[class*="text-sample"] { color:#666; }
