cssのみでテーブル行のフィルタリングを行ってみる

css3のセレクタには:checkedという擬似クラスセレクタが追加されたので，これを使ってテーブルの行をフィルタリングしてみる．
本当だったらselectタグを使いたいところだったのだが，どう考えてもダメっぽいのでinput[type="radio"]で代用．
事前に行毎に独自の検索用属性値を用意しておき，ラジオボタンがチェックされたらその後ろにあるtable要素の特定の行を抽出して表示するようにしてみた．

で，分かったこと．

• あくまでHTMLに記述された静的な属性値のみが有効．例えばinput[type="text"]の場合にユーザーが入力した値はdomオブジェクト経由であればvalue属性から取得できるけれど，CSSからは判らない． 
• 静的な検索しかできないので，複数の選択肢がある場合は全ての組み合わせの分だけスタイルを指定しないとダメ．用途が限られているのならスクリプトが必要ないので便利かもしれない．
• CSSではxpathのようなテキストノードの抽出には対応していない．よって「内容に文字列”a”を含むセル」の抽出といったことは出来ない．
• CSS4で採用されるセレクタには親要素の抽出が加わるかもしれない．

CSSのみで実装すること自体がそもそもアクロバティックで，いかにもパズルを解くような感じで面白いんだけれど，これが実用的かと言われるとちと疑問ではある．

all
a
b
c
d

見出し	見出し	見出し	見出し	見出し
a
a
b
c
c
d
d
d

<style type="text/css">
 #filtered>tbody>tr{
  display:none;
 }
 #filtered,#filtered th,#filtered td{
  border:solid 1px black;
 }
 #opt0:checked~#filtered>tbody>tr{
  display:table-row;
 }
 #opt1:checked~#filtered>tbody>tr[index="a"]{
  display:table-row;
 }
 #opt2:checked~#filtered>tbody>tr[index="b"]{
  display:table-row;
 }
 #opt3:checked~#filtered>tbody>tr[index="c"]{
  display:table-row;
 }
 #opt4:checked~#filtered>tbody>tr[index="d"]{
  display:table-row;
 }
 #a{
  border:solid 1px black;
 }
</style>
<label for="opt0">all</label><input type="radio" name="opt" id="opt0" checked/>
<label for="opt1">a</label><input type="radio" name="opt" id="opt1"/>
<label for="opt2">b</label><input type="radio" name="opt" id="opt2"/>
<label for="opt3">c</label><input type="radio" name="opt" id="opt3"/>
<label for="opt4">d</label><input type="radio" name="opt" id="opt4"/>
<table id="filtered">
<thead>
<tr>
 <th>見出し</th><th>見出し</th><th>見出し</th><th>見出し</th><th>見出し</th>
</tr>
</thead>
<tbody>
<tr index="a">
 <td>a</td><td></td><td></td><td></td><td></td>
</tr>
<tr index="a">
 <td>a</td><td></td><td></td><td></td><td></td>
</tr>
<tr index="b">
 <td>b</td><td></td><td></td><td></td><td></td>
</tr>
<tr index="c">
 <td>c</td><td></td><td></td><td></td><td></td>
</tr>
<tr index="c">
 <td>c</td><td></td><td></td><td></td><td></td>
</tr>
<tr index="d">
 <td>d</td><td></td><td></td><td></td><td></td>
</tr>
<tr index="d">
 <td>d</td><td></td><td></td><td></td><td></td>
</tr>
<tr index="d">
 <td>d</td><td></td><td></td><td></td><td></td>
</tr>
</tbody>
</table>