Blue Flavor

Folklorico! by Kenny Meyers

CSS3, jQuery and Attribute Selectors

July 7th, 2008 at 11:41 a.m.

If you haven’t heard about jQuery, then you’ve most likely been hiding under the proverbial rock, from the proverbial reality, drinking the proverbial martini (the use of the word “proverbial” is as flexible as the jQuery framework).

One of jQuery’s greatest accomplishments is something that the W3C itself has not done: getting browsers to use CSS3 selectors. As many of you know, this is the equivalent of finding Atlantis. It is a great javascript tool, and the missing bridge between CSS and javascript development for front-end designers.

CSS, if you don’t know, is a specification that allows designers to grab or hook into elements (such as the <a></a> element) and then apply styles, color, layout, etc. CSS3 is the third iteration of this and has yet to be supported, but browsers are slowly adopting little rules and tidbits from the spec. Selectors, for our purposes, are the tools you use in .css documents (and .js or javascript documents) to grab elements on an HTML page and alter them. In CSS3, the amount of selectors from previous versions has increased. Where at one time we were limited to #navigation in css or getElementById('navigation') in javascript to refer <ul id="navigation">, we can now use a multitude of selectors based on various values. We then can apply our styles through javascript, or do other great alterations-- thanks to jQuery.

To setup and install jQuery, as well as get used to its lexicon, might I suggest this page: Getting Started with jQuery. This tutorial gives you a basic understanding of how jQuery works; but what I really want you to imbibe from this particular tome is the $() object. It is the universal basin from which our explanation shall thus flow. You plug a selector into the $() object (like this $('#navigation')) and it grabs it like those hands in that dungeon in the first Zelda. You know the one -- you spent hours playing it. You now have hooked an element to modify, move around, etc.

The $() object is what allows us to grab a certain element or a group of elements, much like you would with CSS. #navigation in CSS becomes $('#navigation') in jQuery. Similarly, the class .navigation_links becomes $('li.navigation_links'). It is, like CSS and a district attorney with something to prove, case-sensitive. The only significant difference, of course, is the $()> object that wraps the selector.

This is all well and good, but what’s really exciting about jQuery is all the fun stuff that this guy wrote about in this awesome book. It is progressive-enhancement with immediate results. What more could us iPhone swinging, twitter-using fiends enjoy more then instantaneous results? Nothing, that’s what. We can build Andy Clarke’s transcendent CSS3 world right now.

For this particular article, I’m going to focus on the “attributes” selectors, which are targeted towards the attributes in the CSS3 specification that target elements with the specified attributes and values. For example, in <a href=”foo”></a> href is an attribute, foo is its value.

Beginnings

So let’s talk about some basic attribute selectors (in digg-friendly list form):

  1. $('[attribute]'): This is the basic attribute selector. The W3C states that this should select an element or elements with this attribute. For example, $(‘[href]’) would select all elements on the page (e.g., <a> elements) with “href” links. It’s like Shake N’ Bake baby!

  2. $('[attribute=value]'): A little more definition and tone comes in through this selector. We can use the <a> element again. For example, use $('[href=http://www.foxnews.com]') to select all <a> elements with a link to foxnews, the only reputable news source in America (of course).

More advanced attribute selectors, or, the badass stuff.

So those are all well and good, and are especially helpful for outside links, but let’s talk about the much cooler, more advanced, impress-your-friends-and-mom (hi!) selectors.

  1. $('[attribute!=value]'): This is a simple operation. Let’s say all our <a> elements have href attribute values of foxnews, except one. To select the one without a value of foxnews, we just put $('[href!="http://www.foxnews.com"]'). This reads as such: Please grab the element (in our theoretical <a>) with an href attribute that does not have a value of foxnews.

  2. $('[attribute^=value]') or $('[attribute$=value]'): These two are paired together because they do similar tasks. The ‘=’ between attribute and value means to grab the element whose attribute’s value begins with something (e.g. $('[href^="http"]') will grab all external links). The $= value will grab elements whose attribute value ends with some (e.g. $('[href$=".com"]') will also grab similar links. This requires a certain amount of specificity, whereas http://www.foxnews.com will be selected but http://www.foxnews.com/ will not be selected because it ends with the character "/" (and not just ".com").

  3. $('[attribute*=value]') is the most dangerous and also the most powerful. This selector will grab all attributes that contain some form of the value. For example, if you grab $('[href*="fox"]'), you’ll get all elements that link to fox news. A word of strong warning: this will also grab your element with a link to firefox.com because it contains the three letter combination “fox”. It's powerful because it looks between the lines for the phrases or values you’re searching for, but you must be specific in either your HTML or your “value” in order to get results you desire.

Playtime!

Play around: Load up firefox, load up firebug (an extension available for Firefox 2 at http://www.getfirebug.com or for Firefox 3 users go here.), enable the console* and go to www.jquery.com. Try this: $('[href]').hide(); You just hid all the links!

Now try this: $('[id="jq-wrapper"]').hide(); OH MY GOD! YOU BROKE F@!$&%G JQUERY’S SITE! Well… at least on your end. Trust me, it’s fine… for now. The <a> tag provides a great element to play with, but you can select attributes of other elements, too! Try grabbing title attributes on images, or class=value pairs.

How about some CSS alteration? $('[id="jq-wrapper"]').css("background-color", "green") will change the color of a background, based on the rules of CSS you already know. You can try other ones such as .css("float", "left") or .css("text-decoration", "underline") and apply it to any element on the page.

There are, of course, more advanced CSS3 selectors available on jQuery’s documentation. If you’re feeling exploratory, I suggest you try them out and even comment on your findings. However, you’ll really have fun when you start using those “grabbed” elements for effects with a ‘period’ or ‘dot notation’ to start manipulating the jQuery site (e.g. $('[id="jq-wrapper"]').hide();). Try out cool effects like .fadeOut() and then .fadeIn() to bring it back. You can find all those cool effects documented here.

That’s it for CSS3 attribute selectors with jQuery. I suggest you just try playing around with the jQuery site and Firebug to get the hang of it. It’s really basic, and quickly rewarding. It’ll give you an idea of how jQuery works with CSS3, and will prepare you for all the cool CSS3 stuff you’ll be able to do with stylesheets in the future.

*To learn about the console and do this stuff, go here: http://getfirebug.com/cl.html

Kenny Meyers

More Information