JavaScript Selector Library Supports CSS4!

I was reading DailyJS and ran across this great JavaScript selector library called Sel.

It can select elements using the very brand new CSS4 features. The following are some examples.

/* subject overriding, was '$div .box' in a previous CSS4 draft,
   returns 'div' rather than '.box' */ 
div! .box
 
/* id references, 'input' who's ID matches 'label's 'for' attribute */
label /for/ input
 
/* case insensitive attribute matching */
[attr = "val" i]
 
/* :nth-match and :nth-last-match to match against sub-selectors */
div:nth-match(3 of .box)
 
/* links who's target absolute URI matches the current document's URI,
   arguments specify the degree of locality */
a:local-link(0)
 
/* :column */
td:column(col.profit)
 
/* :nth-column and :nth-last-column */
td:nth-column(even)

I’ve been hopeful that a selector engine would take on the challenge of CSS4 support. From what I understand about jQuery, CSS4 support would require a lot of rewriting Sizzle since it is so highly dependent on querySelectorAll(). I know that NWMatcher is a lot more robust in it’s pre- and post-processing of selectors even when the browser supports querySelectorAll(). In other words, I’m thinking a selector engine needs to know when the browser supports CSS4 and use querySelectorAll() if possible even when CSS4 is not supported.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>