Sample Tree

CSS as Tree Query

This snippet can be edited to show live changes in the demo file-system, showing CSS as a generic tree query language.

Selectors and Combinators for any tree.

Selectors and Combinators provide a concise syntax to select on any arborescence. The browser natively performs it visually; tools exist to perform actual queries (usually with no / partial pseudo-selector support). This unfolds the filesystem tree as xml and opens it in the browser. 

  {
    echo '<!doctype html>
    <style contenteditable style='display: block'>
    /* CSS queries here. */
    </style>'
    tree ~ -X
  } > /tmp/tree.html && open /tmp/tree.html
Combinators Reference
Name Syntax Notes
Selector List , Union/Or
Child > Child (directly nested)
Descendant   Child (any distance)
Next-Sibling + Sibling (directly subseq.)
Subsequent-Sibling ~ Sibling (any distance)
Namespace | Restricts to namesp.
Column || Same index across rows