Update: Lo probé en Firefox 24 y no anda. La funcionalidad está implementada pero no está habilitado en la configuración por defecto (https://developer.mozilla.org/en-US/docs/Web/CSS/:scope).
En un montón de bibliotecas para el browser, como d3 o jquery podemos usar selectores de CSS para elegir nodos que son descendientes de un conjunto de nodos dado. Esta funcionalidad, casi siempre está basada en el método elem.querySelectorAll(css_selector). Hoy descubrí algo muy interesante de este método. Hay una pseudo-clase de css que se llama :scope y cuando es usada en el selector del método de arriba refiere al elem sobre el que se hizo la consulta.
Ésta pseudo-clase, la podemos usar para elegir a los hijos de un elemento que cumplan cierta condición. Por ejemplo, elem.querySelectorAll(":scope > .klass") busca todos los elementos hijos (y solo hijos, no nietos) de elem que tienen klass como clase.
Como las bibliotecas que mencioné al principio usan esto en sus entrañas, también se puede usar en las mismas cuando buscás nodos. Por ejemplo, en d3 sería algo así: my_selection.selectAll(":scope > g").
Happy hacking,
Aureliano.
PD: La información original sobre cómo hacer esto la saqué de acá.
PD2: Lo probé con d3 en mi Chrome y anda. La documentación de Firefox también dice que anda, pero no lo probé. El resto de los browsers son un misterio para mi. Si lo prueban en otros contextos, avisen.
