jQuery can select anything that CSS3 can select. But it doesn't stop there! There are a number of additional selectors that jQuery offers (via the Sizzle selector engine) that are pretty darn useful sometimes. For instance, CSS has attribute selectors that allow you to select an element based on any arbitrary attribute the element might have. For instance:

<div data-whatever="elephant-eyeballs"></div>

There is a CSS selector we can use in jQuery to select that:

$("[data-whatever='elephant-eyeballs']");

There are variations on the attribute selector, like instead of = you can do ^= to indicate "starts with this value". But for some reason, CSS doesn't have != or "not equal to this value". jQuery does! That's an example of a jQuery selector extension.

There are lots of these selector extensions. A few we specifically talk about in this screencast:

  • :eq() - a 0-indexed version of :nth-child()
  • :even - shortcut for :nth-child(even)
  • :gt(n) - select elements with a greater index than n. Also a shortcut for a more complex :nth-child() forumla.

Possibly the most useful selector extension of all is :has() - which limits the selection to elements which contain what you pass this pseudo selector (or is it a pseudo pseudo selector :) It's likely that someday in the future CSS will have something like this for us (I think it's going to be like pre ! code) but that's a long way off. Unfortunately I don't make a very compelling argument for it in this screencast, but you'll know when you need it! For instance "Select all .module's that contain an h3.sports-bar" - that kind of thing.

You can also make your own selection extensions if you wish. Here's an article on that. The example is to make :inview which selects an element only if it's visible on the page at the current scroll position. It would be like this:

jQuery.extend(jQuery.expr[':'], {  
  inview: function (el) {    
    var $e = $(el),    
        $w = $(window),    
        top = $e.offset().top,   
        height = $e.outerHeight(true),    
        windowTop = $w.scrollTop(),    
        windowScroll = windowTop - height,    
        windowHeight = windowTop + height + $w.height();    

    return (top > windowScroll && top < windowHeight);  
  }
});

Comments

  1. User Avatar
    Dylan George
    Permalink to comment#

    Select and do, select and do.

  2. User Avatar
    Richard Bagshaw
    Permalink to comment#

    Select and do, select and do :)

  3. User Avatar
    Jay Wilson Jr.
    Permalink to comment#

    Select and do, select and do… I couldn’t help myself ;)

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag