March 27th, 2006

Prototype Gets Attribute Selectors

10 comments on 306 words

After releasing event:Selectors about 6 days ago the response was overwhelming. The question asked by most was if event:Selectors supported attribute selectors. My response a week ago was no, however, my response today is yes!

Thanks to Brian Donovan for the quick call to action in getting a patch into Prototype. Grab the latest Prototype to check it out. There is no need to update the event:Selectors script itself because this functionality was purely dependent on Prototype.

How they work

If we wanted to get all input elements whose type was submit we could use the = operator.


input[type="submit"] {  color: #ccc; }

Brian also snuck in a non-standard != (not equal to) which is pretty useful.


a[href!="#"] { background: #c00; }

You can also throw in multiple attribute selectors if you’d like:


a[class~=external][href="#"] {  font-style: italic; }

Check out the unit test for more examples and don’t forget to read up on attribute selectors over at W3C because some of them have quiet the arbitrary meaning.

Discussion

  1. Erik Erik said on March 27th

    Thanks Brian Donavan!

  2. Brian Donovan Brian Donovan said on March 27th

    Thanks for getting the word out. Your readership is much larger than mine (which is probably around 4, hehe).

    I noticed you spelled my name wrong though. Donavan is a common misspelling.

  3. Justin Palmer Justin Palmer said on March 27th

    oops! Corrected now. I get referred to as ‘Jason’ all the time if it’s any consolation. ;-)

  4. Piotr Usewicz Piotr Usewicz said on March 27th

    Yeah! Woohoo!

  5. Emerson Emerson said on March 30th

    Great site and great projects!

  6. Chris Chris said on April 1st

    Great stuff Justin, would it be possible to mimic the register/apply approach of behaviour which permits adding rules at different level ? For example, i use a decorator pattern for my pages and both my decorator and pages use some rules.

    I could of course wrap your stuff and work around this limitation but i think a 2 phase approach(first register some rules, can be called N times to add more rules, and then later on apply those rules) could really benefit your event:Selectors

    RFE:

    • Add register(rules)
    • Add start()

    Thanks in advance.

  7. Justin Palmer Justin Palmer said on April 3rd

    Chris, this sounds like a useful and practical idea. Do you mind creating a ticket for it: http://encytemedia.com/treasure/

  8. Alexander Alexander said on April 3rd

    Are css3 selectors supported?

    Eg.

    [att^=val]

    Represents an element with the att attribute whose value begins with the prefix “val”.

    [att$=val]

    Represents an element with the att attribute whose value ends with the suffix “val”.

    [att*=val]

    Represents an element with the att attribute whose value contains at least one instance of the substring “val”.

  9. IDisposable IDisposable said on April 5th

    Any chance this update is available on a site NOT built on RubyOnRails (or one that doesn’t give a useless precondition failure when I go there)?

    http://dev.rubyonrails.org/browser/trunk/railties/html/javascripts/prototype.js?format=raw

  10. Tobie Langel Tobie Langel said on May 23rd

    Hi,

    I’ve just added a patch for attribute selectors which makes them fully IE6 compatible.

    It also adds support for *=, ^= and $= operators and replaces != (which is not part of the specs) with the spec friendly :not(X) which can be applied to any of the attribute selectors:

    
$$('form#foo input:not([class~=error])').each(function(input) {
  Element.setStyle(input, {color: 'green'});
});

    Check the updated test file for more possible uses.

    Comments are more then welcome. Please be nice though: this is my first patch proposition for Prototype.

Sorry, comments are closed for this article.