Harald Kirschner’s Sly

By  on  

Back in December when the Sizzle selector engine was announced, John Resig's creation was thought to be the end game. Four months later it seems as though it was just the beginning.

Harald Kirschner has released Sly, a standalone JavaScript selector engine that absolutely tears through the DOM. Sly is a tiny 3KB minified and gzipped, supports all CSS3 selectors, and provides functionality to create your own custom combinators. Don't believe me? Read Harald's documentation.

Support

Usage Examples

// Finds all div blocks
blocks = Sly.search('div');

// Finds all anchors with `href` attribute that starts with `"http://"`
anchors = Sly.search('a[href^="http://"]');

// Finds all list item that are direct descendants of the list item with id `"navigation"`
items = Sly.search('ul#navigation > li');

// Finds all heading elements
heads = Sly.search('h1, h2, h3, h4, h5, h6');

// Finds all odd rows in all tables with the class `"zebra"`
rows = Sly.search('table.zebra tr:odd');

// Finds something and looks really complex
inputs = Sly.search('form[action$=/send/] label~span+input[type=text]:first-child');

That last one was something special, eh?

Congratulations!

Join me in extending a huge congratulations and thank you to Harald! While Sizzle got the ball rolling, the selector engine game isn't over by any means!

Recent Features

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

  • By
    MooTools Star Ratings with MooStarRating

    I've said it over and over but I'll say it again:  JavaScript's main role in web applications is to enhance otherwise boring, static functionality provided by the browser.  One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over the...

  • By
    HTML5 Input Types Alternative

    As you may know, HTML5 has introduced several new input types: number, date, color, range, etc. The question is: should you start using these controls or not? As much as I want to say "Yes", I think they are not yet ready for any real life...

Discussion

  1. Sly is awesome. I’ve been messing around with it lately. It’s fast as hell.

  2. Interesting! By the way, on your site, simple key shortcuts such as pressing space or arrows to scroll, or Page Up/Down, doesn’t always work. I tested some different scenarios, and when entering something to a comment input and then again clicking outside the input, it suddenly works… Weird behaviour. I’m using Firefox 3.0.7.

  3. Jem

    I read about this first on clientcide, but definitely very exciting to see someone with some strong mootools ties putting out a selector engine. I don’t have anything against jquery, but I’ve been a hardcore mootools fan for some time now, and I suppose its that passive nature mootools and the mootools community have in regards to advertising that I enjoy. Its a framework built in a way that makes sense, and it doesn’t need phony gimmicks and underhanded approaches to attract the audience it wants. I was pretty inspired with how much more intelligent the responses were from the community when Sizzle advocates were trying to weasel the engine into every framework core.

    I haven’t gotten a chance to use Sly yet, but I’m looking forward to the first opportunity.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!