Skip to content

JavaScript Selector Library Supports CSS4!

Updated: at 08:03 PM

I 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.