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
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • By
    jQuery Countdown Plugin

    You've probably been to sites like RapidShare and MegaUpload that allow you to download files but make you wait a specified number of seconds before giving you the download link. I've created a similar script but my script allows you to animate the CSS font-size...

  • By
    MooTools Link Fading

    We all know that we can set a different link color (among other properties) on the hover event, but why not show a little bit more dynamism by making the original color fade to the next? Using MooTools 1.2, you can achieve that effect. The MooTools...

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!