CSS3-属性セレクタ

Last-modified: 2010-03-28 (日) 22:45:32

属性セレクタとは

CSSで属性を検索っぽく指定してスタイルを適応出来る仕組み。
どう考えてもウェブ開発用というよりは、再開発、すなわちStylish向け。
正直、正規表現が欲しいところではあるが、そこまでするとただのStylish専用のなにかになってしまうし、たぶんかなり重くなるんだろう。
理想的には初回読み込み時には読み込み後にマッチングをとり、二回目からはそのマッチングに従って高速で処理するというのがよろしい。
ホスト名やページ構造を解析して同種と思われたら以前のものを適応するとかあったらもっとよろしい。（同じCSSを参照してたら同じようなサイトとみなせばいいのかな）
しかしまあ、そんなものをアドオンで埋め込むのは苦労するし、proxyを通しつつ、ある程度強い文字列処理能力のある言語（rubyでもphpでも）で空き時間に処理するというのが効率的であろう。

属性セレクタ説明例
[attr = param]通常の書き方。attrがparamであるもの。=paramを省略すると、attr属性がついているもの[id=hoge] [color=#FF00FF]
[attr *= param]attrにparamを含むもの。[id *= ad]とかやると広告がすべて消し飛ぶ・・・かもしれない
[attr ^= param]attrがparamで始まるもの[class ^= googlead]googlead1,googlead2やgoogleadsに引っかかる
[attr $= param]attrがparamで終わるもの[href $= html]とかすればhtmlリンクに対してのみなんとかできる
[attr ~= param]attrの値が空白区切りのリストであり、その中にparamが含まれるもの[id ~= ad]
[attr ｜= param]attrの値がハイフン区切りのリストであり、その中にparamが含まれるもの[id ｜= ad]

下二つはFirefox3.6.2の環境では区別されない。
Stylishを使う上で大した問題ではないのでこだわらないことにする。

サンプルコード

次のコードをhoge.htmlファイルに書いてブラウザで見てみてください。

<html>
<head>
<title>Style Sheet Sample</title>
<style TYPE="text/css">
<!--
div[id = ads]{
	background-color:red;
}
div[id *= ad]{
	border: 1px solid gray;
}
div[id ^= ad]{
	padding-left:100px;
}
div[id $= html]{
	color :blue;
}
div[id ~= ad]{
	font-size:20px;
}
div[id |= ad]{
	text-align:left;
}
-->
</style>
</head>
<body>
<div id="ads">ここはadsです。</div>
<div id="ad301">ここはad301です。</div>
<div id="ads-html">ここはads-htmlです。</div>
<div id="debader">ここはdebaderです。</div>
<div id="debadser">ここはdebadserです。</div>
<div id="normal">ここはnormalです。</div>
<div id="bin ad safe test">ここはbin ad safe testです。<div>
<div id="bin-ad-safe-test">ここはbin ad safe testです。<div>
</body>
</html>

対応状況

未調査

参考リンク

http://hp.vector.co.jp/authors/VA022006/css/selector.html
http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20387549,00.htm