Common functionality in js libraries are convenience functions to get elements by CSS selector syntax. Attached is an impementation of this, initially ported from Prototype.
It supports the following features from the CSS3 draft:
- Select by tag name (A)
- Select by class (.theclass)
- Select by id (#someid)
- Combinators
- Descendant: E F
- Child: E > F
- Immediate following sibling: E + F
- Following sibling: E ~ F
- Attribute selectors
- simple "has attribute" (without operator)
- = equal
- != not equal (not in CSS std.)
- ~= word containment
- ^= starts-with
- $= ends-with
- *= substring containment
- |= first part of hyphen deleimited (eg. lang|="en" matches lang="en-US")
- Pseudo-classes
- :root, :nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type, :first-child, :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, :enabled, :disabled, :checked, :not(..)
For the :nth-* pseudoclasses, the "an+b" syntax is partially supported, specifically a and b must be non-negative and only a is optional (this differs from the CSS std.) Also, "odd" and "even" are supported, e.g. "table tr:nth-child(odd)" gives you every other row of table starting with the first one.
I'm not too sure if :enabled, :disabled or :checked work correctly.
This needs testing and writing of unit tests.
At first this is a seperate module, but I would like to see this be included ind MochiKit.DOM if people like it and don't mind the cost (13Kb).
The W3C CSS Selectors working draft: http://www.w3.org/TR/2005/WD-css3-selectors-20051215/
