スタイルシートで正規表現っぽいものを使う

スタイルシートに使われる記号

CSSをいじっていて前々から気になっていたのがusercontent.css - Mozilla Firefox まとめサイトなどのページで度々見られる



「href^」「href$」「href*」



とかいうセレクタ。



――ただのhrefと何が違うんだい？――



気にはなったけどもGoogleで検索しようにも「^$*」といった記号は検索文字に使えないわ適当に「スタイルシート ワイルドカード|正規表現」とか「スタイルシート 記号」とかで検索しても出てこないわ、ていうか誰も書いてないんじゃないかっていうくらい情報が無くて難儀しました――が、持ち得る知識を最大限に活用し、何とか気合いでこの記号の意味を知ることができましたので、社会貢献のために書き記しておこうと思います。

使い方の説明

まず、「^$*」といった記号はhrefだけでなくsrcやvalueなど、あらゆる属性に対して使用することができます。



例：

• a[href^="javascript:"]


• a[target$=".pdf"]


• embed[src*="youtube.com/v/"]

^（サーカムフレックス）

属性の値の始めの部分にマッチします。

例：a[href^="javascript:"]

javascript:hogehogeやjavascript:foobarにはマッチしますが、http://hogehoge.comにはマッチしません。

$（ドル）

属性の値の終わりの部分にマッチします。

例：a[href$=".pdf"]

http://hogehoge.com/foo.pdfやhttp://fugafuga.com/bar.pdfにはマッチしますが、http://hogehoge.com/foobar.htmlにはマッチしません。

*（アスタリスク）

属性の値の一部にマッチします。ワイルドカードみたいなもんです。

例：embed[src*="youtube.com/v/"]

http://www.youtube.com/v/fooやhttp://jp.youtube.com/v/barにはマッチしますが、http://www.hogehoge.com/v/にはマッチしませんし、http://www.nicovideo.jp/thumb_watch/foobarにももちろんマッチしません。

追記：よくよく調べたらCSS3の属性セレクタというものだった

Opera 9 でサポートされるウェブ仕様 - CSSに「Attribute なんちゃら」って書いてありました。これがまさに探し求めていたものでした。

zng.info - 選択子に物凄く分かり易く翻訳されてます。



こんな基本的なこと知らなくて記事書いちゃったなんて恥ずかしいよ……。