css selectors are working

project.clj

@@ -4,7 +4,7 @@
   :dependencies [[org.clojure/clojure "1.3.0"]
                  [goog-jar "1.0.0"]]
   :dev-dependencies [[lein-cljsbuild "0.0.11-SNAPSHOT"]]
-  :hooks [leiningen.cljsbuild]
+  ;; :hooks [leiningen.cljsbuild]
   :cljsbuild [{:source-path "src/cljs"
                :jar true
                :compiler {:libs ["goog/dom/query.js"]
@@ -34,3 +34,12 @@
                            :pretty-print false
                            :output-dir ".cljsbuild/advanced"
                            :output-to "public/test_advanced.js"}}])
+
+(comment
+  (do
+    (require '[cljs.repl :as repl])
+    (require '[cljs.repl.browser :as browser])
+    (def env (browser/repl-env))
+    (repl/repl env))
+
+  )

readme.md

@@ -44,6 +44,27 @@ The `xpath` function also takes an optional first argument (which can be any `Do
     (xpath "span"))
 ```
 
+The `sel` function in the `domina.css` namespace works the same way for CSS selectors:
+
+```clojure
+(sel ".my-class")
+```
+
+```clojure
+(sel "#my-id")
+```
+
+```clojure
+(-> (sel "body")
+    (sel "div")
+    (sel "p")
+    (sel "span"))
+```
+
+```clojure
+(sel "body > div > p > span")
+```
+
 Other selector functions include the core functions `by-id` and `by-class` which return a `DomContent` based on node id and node class, respectively.
 
 ## Examples

src/cljs/domina/css.cljs

@@ -6,9 +6,14 @@
   []
   (aget (dom/getElementsByTagNameAndClass "html") 0))
 
+
 (defn sel
   "Returns content based on a css selector expression. Takes an optional content as a base; if none is given, uses the HTML element as a base."
   ([expr] (sel (root-element) expr))
   ([base expr] (reify domina/DomContent
-                      (nodes [_] (seq nil))
-                      (single-node [_] nil))))
+                      (nodes [_] (mapcat #(dom/query expr %)
+                                         (domina/nodes base)))
+                      (single-node [_] (first (filter
+                                               (complement nil?)
+                                               (mapcat #(dom/query expr %)
+                                                    (domina/nodes base))))))))

test/cljs/domina/test.cljs

@@ -7,11 +7,10 @@
         [domina.xpath :only [xpath]]
         [domina.css :only [sel]]
         [domina.events :only [listen! unlisten! remove-listeners! fire-listeners!]])
-  (:require [goog.events :as events]))
+  (:require [goog.events :as events]
+            [clojure.browser.repl :as repl]))
 
-(comment
-  (repl/connect "http://localhost:9000/repl")
-  )
+(repl/connect "http://localhost:9000/repl")
 
 (js* "
   window['tryfn'] = function(f) {
@@ -47,6 +46,39 @@
            "<div class='d1'><p class='p1'>P1</p><p class='p2'>P2</p>
 <p id='id1' class='p3'>P3</p>"))
 
+
+;;;;;; CSS selection tests
+
+(add-test "basic CSS selection"
+          #(do (reset)
+               (standard-fixture)
+               (assert (= 3 (count (nodes (sel "p")))))))
+
+(add-test "basic CSS selection (single node)"
+          #(do (reset)
+               (standard-fixture)
+               (assert (instance? js/Element (single-node (sel "p"))))))
+
+(add-test "CSS selection with class specification"
+          #(do (reset)
+               (standard-fixture)
+               (assert (= 1 (count (nodes (sel ".d1")))))))
+
+(add-test "a relative CSS selector"
+          #(do (reset)
+               (standard-fixture)
+               (assert (= 3 (count (nodes (-> (sel ".d1")
+                                              (sel "p"))))))))
+
+(add-test "extended CSS chaining"
+          #(do (reset)
+               (append! (sel "body")
+                        "<div><p><span>some text</span></p><p><span>more text</span></p></div>")
+               (assert (= 2 (count (nodes (-> (sel "body")
+                                              (sel "div")
+                                              (sel "p")
+                                              (sel "span"))))))))
+
 ;;;;;; DOM Manipulation Tests
 
 (add-test "basic xpath selection"