キックボクシングの選手 兼 指導員とITエンジニアの２足のワラジを履いたおっさんの日常を綴ったBlog

そろそろHTML5とCSS3について、Wikiに纏めておこうかな。と思っているのですが、その前に意外と知られていないCSSセレクタについて、ちょっと書きたいと思います。

多くの人は普段、タグ名、id、class 指定ぐらいしか使わないと思いますが、CSSセレクタには、他にもたくさんの種類があります。

その1つに属性のセレクタがあります。
以下のように name や type などの属性を指定できるセレクタです。

[type=text] { color : red; }
[name=test1] { color : red; }
[name^=test] { color : red; } /* 前方一致 */
[name*=es] { color : red; } /* 部分一致 */
[name$=st1] { color : red; } /* 後方一致 */
input[name=test1] /* タグ名と組み合わせて */

http://www.magata.net/memo/index.php?CSS%A5%BB%A5%EC%A5%AF%A5%BF

普通の静的なホームページでは使う事はあまり無いとは思いますが、業務系のWebアプリやECなど、動きのあるサイトを作る時にはちょくちょく使う事があります。