Selectors Level 4〜次世代セレクタのアイデア

まだSelectors Level 3はRCにすらなってないですが、Unofficial CSS Working Group Wikiにある、Selectors Level 4に次世代セレクタのアイデアが挙げられているのでメモしておこう。より詳しくは原文参照ってことで。

URLのセレクタ

E:current(n)

Eは要素、nは数で、ディレクトリの階層を示す。n=0ならドメインのトップレベルと一致、(n)がなければ自分自身のURIと一致する。

例えば、次の3つのリンクがあるとする。

<a href="http://example.org/">null</a>
<a href="http://example.org/test/">pointer</a>
<a href="http://example.org/test/orz.html">exception</a>

また、次の4つのスタイルを与える。

a:current {} /* 自分自身のURIに一致 */
a:current(0) {} /* ドメインのトップレベルに一致 */
a:current(1) {} /* ドメインの第一階層に一致 */ 
a:current(2) {} /* ドメインの第二階層に一致 */

もし、今いるURIがhttp://example.org/test/orz.htmlだとすると、

リンク1はスタイル2が適用される
リンク2はスタイル3が適用される
リンク3はスタイル1と3が適用される
スタイル4はどのリンクにも適用されない

サイトナビゲーションとかそういう用途を考えてるみたい。

IDREFのコンビネーション

/attr/記法

A /bee/ B

というようなスタイルを与えれば、

<A href="#bee"/>  <B id="bee"/>

に一致するセレクタ。

:friend(attr, selector)記法

:friendは擬似クラスで第一引数は属性、第二引数はセレクタ。

label:friend(for, input:focus)

というように与えれば、

<input type="checkbox" name="cate" value="travel" id="travel">
<label for="travel">旅行</label>
<input type="checkbox" name="cate" value="movie" id="movie">
<label for="movie">映画</label>

というフォーム部品があるとすると、チェックされたフォームのlabel要素に対してスタイルが適用される（はず）。

関係選択子

A // B

セル中のコラムとか： col.foo // td
inputとラベルとか： input // label
imgとmapとか： img // map

#というか、関係があるとどうやって定義するんだろ…

擬似属性セレクタ

tableの2番目のcolumnを選ぶ： [#column=2]

数字属性セレクタ

[height>2], [count<=5], [balance<0], [#row>1]

方向セレクタ

:rtl :ltr

テキストの方向でということだろう。

そのほか

subjectうんたらとか（下記URL参照）
http://www.w3.org/TR/2000/WD-css3-selectors-20001005/#subject-pseudo

:matches()擬似クラスだとか
http://lists.w3.org/Archives/Public/www-style/2003Apr/0146.html

::quote-start、::quote-end
だとか、そういうアイデアがあるらしく。

…よく思いつくよないろいろと。

血統の森+はてな

旧はてなダイアリーの自動インポートによるアーカイブです。