Prototype Gets Attribute Selectors

—Monday, March 27 2006

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.