CSSセレクタの最大の欠点(Contextual Selector)はサポート可能か

JavaScript Selector

id:vantguarde さんと、id:amachang さんが半年ぐらい前に

http://web.g.hatena.ne.jp/vantguarde/20081030/1225341506

さてさて、ひとつ残念なのが“Contextual Selector”という擬似クラスが結局導入されなかったこと。

今のSelectors APIでは、「コンテキストの子要素であるdiv」みたいなクエリをかけることができません。どういうことかは、「CSS Selector の最大の欠点」を読むとわかるかなと。

これについてはJohn Resigも“Thoughs on querySelectorAll”で書いていて、WebApps WG（当時はWebAPI WG）にコメントを投げたりしています。

WGもそれは認識していたようで、その結果提案されたのがContextual Selectorでした。これを使うと「querySelectorAll(":scope > div")」みたく書けるわけで、その後一部の人*1の気を引いていたんですが、このたび却下になりました。

http://d.hatena.ne.jp/amachang/20080602/1212384078

// 以下のようなことができない
elm.querySelectorAll('> div');
elm.querySelectorAll('+ div');
elm.querySelectorAll('~ div');

って書かれてたのを、ふと思い出しました。

:scope pseudo-class は実装してないけど、uu.css.querySelectorAll を一行入れ替えると、amachangさんのやりたい構文を理解するように調教できたりもする。

uu.css.querySelectorAll = function(expr, context, really) {
  var _contentType, _tags, _ie = uu.ua.ie, // alias
      // --- double registration guard ---
      uuid,       // unique-id
      guard = {}, // global guard
      unq   = {}, // local guard
      mixed = 0,  // 1: mixed
      // --- result and context elements ---
      rv  = [], ri, r,
-     ctx = [context],
+     ctx = context.length ? context : [context],

<html><head><script src="uupaa.debug.js"></script></head><body>
<div>--div--
  <ul>
    <li>The background of this list item should be green</li>
    <li>The background of this list item should be green</li>
  </ul>
</div>
<div>--div--
  <ul>
    <li>The background of this list item should be green</li>
    <li>The background of this list item should be green</li>
  </ul>
</div>
<script>
function boot() {
  uu.css(">ul>li", uu.tag("div")).forEach(function(v) {
    v.style.backgroundColor = "lime";
  });
}
</script></body></html>

Contextual Selector って、こういうイメージでいいのかな?
# 仕様はこれから読みます

vantguarde さんにブクマでコメントいただきました

querySelector系にはvalidなselectorを渡さないといけないので、「> element」とか構文的に不正なものは書けないんですよね。そのための疑似クラスだったりします。

なるほど。なるほど。この擬似クラスが仕様落ちしたのは、ちょっともったいないですね。