Building a Simple CSS Selector Engine: New Premium Tutorial
plusvideos

Building a Simple CSS Selector Engine: New Premium Tutorial

on Nov 16th 2010 with 13 comments
Tutorial Details
  • Topic: JavaScript
  • Difficulty: Intermediate - Advanced

Recently, I thought I’d try my hand at creating a simple CSS selector engine. You know what I’m talking about: it’s the kind of thing you use in most JavaScript libraries, where you pass in a CSS selector to find the elements you want to work with. Today, I’ll show you how to create a really simple one!

Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

Building a Simple CSS Selector Engine: New Premium Tutorial


You’ve probably used the selector engines built into several JavaScript libraries, but do you have any idea how they’re built?

If not, this tutorial will take you through the process of crafting your own CSS selector engine. You’ll learn how to break down the decently complex problem of selecting DOM elements into manageable chunks and code it piece by piece . . . all while using only the best JavaScript practices!“

Join Net Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Phototuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm a Canadian web developer, a staff writer at Nettuts+, and the author of the Rockable Press eBook Getting Good With Git. I prefer JavaScript and Ruby. Soon, I'll be doing some writing on my personal site; of course, you can follow me on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://laroouse.com edurup

    bu sitenin şekli şemali baya güzelmiş

    • pdesignx

      eğer fotodaki sensen, ben sana kralını yaparım sitenin :P

  • http://manmohanjit.com/ Manmohanjit Singh

    I’m getting this error: SignatureDoesNotMatchThe request signature we calculated does not match the signature you provided. Check your key and signing method

    Can’t download it :(

    • http://andrewburgess.ca Andrew Burgess
      Author

      Hmm, try clearing your cookies and signing into Tuts+ again. If that doesn’t work, maybe email Tuts+ support.

  • http://tracker1.info/ Michael J. Ryan

    Interesting, but to be honest, I’d probably just use http://sizzlejs.com/ If I wanted to use a fairly complete selector engine.. It’s currently at the heart of jQuery and prototype.js

    • http://andrewburgess.ca Andrew Burgess
      Author

      Oh, most definitely. This was just to give you an idea of how a more complex problem can be broken down and solved in JavaScript . . . as well as give you a greater respect for Sizzle and the others :).

  • http://www.nimeshchheda.com/ Nimesh Chheda

    Nic1

  • Peter Nagy

    Sizzle is too broken to be respected (http://tiny.cc/JavaScript-Query-Engines, http://tiny.cc/CSS3-Selectors-tests).

    Anyway, can you tell me what color theme are you using in vim, also if you’re using extra js/ruby syntax files?

    • http://andrewburgess.ca Andrew Burgess
      Author

      I’m using “Mustang” with the default sytax files

  • http://www.developer.web.tr Oğuz Çelikdemir

    Hi,
    could you please check the download link in premium section? The link giving the following error message when we click ( I have tried both IE and Firefox ) :

    -
    SignatureDoesNotMatch
    The request signature we calculated does not match the signature you provided. Check your key and signing method.
    47 45 54 0a 0a 0a 31 32 39 30 37 35 32 38 39 30 0a 2f 6e 65 74 74 75 74 73 2f 38 35 33 5f 73 65 6c 65 63 74 6f 72 45 6e 67 69 6e 65 2f 42 75 69 6c 64 69 6e 67 5f 61 25 32 30 5f 73 69 6d 70 6c 65 5f 63 73 73 5f 73 65 6c 65 63 74 6f 72 5f 65 6e 67 69 6e 65 2e 7a 69 70
    EB186973E5AE5A25
    /ssilc5+XL/4n8azLusAPV5KJb3+61BTJqXJ7i94bDYgU2Wo4c+WpJp2XCtgvEHg
    VEaAHFN0mn8CfleEO66cayQz154=
    GET 1290752890 /nettuts/853_selectorEngine/Building_a%20_simple_css_selector_engine.zip
    AKIAIB2MZTVHYNT4TJUA

  • Cholmondley Warner

    First thing to point out. Due to it being a top down search engine ( I think that’s right ) it will fail on something like the following

    var el = SYLECTRA(‘div span’); // returns selector: div span | result: [span, span]

    Maybe adding a temporary id on the node to eliminate duplicates might be an answer? Will have to experiment.

    I think I’m right in sayinf [].slice.call doesn’t work on html collections in IE. Would alternatively build a toArray method using try and catch for that.

    Also interested to see how it stacks up against querySelectorAll performance wise.

    As you point out it’s not fully fledged, but more a concept.

    Certainly gives a decent foundation to work from. All in all a great tutorial. Really enjoyed the screencast!!

    • Cholmondley Warner

      For some reason the recommended pre code tags don’t seem to be working, and my html was excluded.

      The example I gave was a span within a div within a div.

      I’m here

      var el = SYLECTRA(‘div span’); // returns selector: div span | result: [span, span]

  • http://www.anon.com Djidji

    The selector engine breaks if you search for something like

    “div.content ul.items”

    The variable ret_arr is initialised at the top of the function but it should be done just where it is used

    if (par.length) {
    ret_arr = []; // otherwise you get the previous parents again
    for (i = 0; par[i]; i++) {
    if(par[i].className.indexOf(element[1]) > -1) {
    ret_arr.push(par[i]);
    }
    }
    curr_col = ret_arr;
    } else {