Getting Started With jQuery - CSS Selectors
Written by Ian Elliot   
Monday, 15 October 2012
Article Index
Getting Started With jQuery - CSS Selectors
CSS Pseudo Classes

Pseudo Classes

 

The next level of complication is that type selectors can have additional conditions attached to them.  The general form of a selector is a type selector followed by a condition. The problem is what to call these conditions. The CSS documentation calls them selectors which is confusing. Some of these conditions are also called pseudo classes.  jQuery calls them selectors or filters. However, a filter has a very specific meaning in jQuery. 

So we have no choice but to call them selectors, even though they are auxiliary conditions that apply to selectors.

Let's start by looking at one of the most easy to understand and easy to apply - the attribute selectors.

Attribute Selectors

Elements can also be selected on the basis of their attributes. Recall that attributes are name value pairs that occur within tags. For example,

<div data-sales="10">widget</div>

uses the HTML5 data-* attribute to record the number of items sold. If you haven't discovered data-* it is worth knowing about because it enables you to embed custom data in any HTML tag.

jQuery has lots of selector types that allow you to select elements based on attributes both their names and their values. 

To pick out all of the elements of type T that have a particular attribute you would use T[name] where name is the full name of the attribute.

The square brackets generally indicate a selector that works with attributes.

For example, to select all of the elements with a data-sales attribute you would use:

$('div[data-sales]');

Notice that the result would be an array of <div> elements that had a data-sales attribute not an array of attributes.

There are jQuery methods that allow you to retrieve and change attributes. For example:

var n=$('div[data-sales]').attr("data-sales");

retrieves the specified attributes from the first element in the array i.e 10.

You can also use the universal type selector to select any elements with a particular attribute.

For example:

$('*[data-sales]');

selects any elements that have a data-sales attribute. Following the rule that you can drop the asterisk you can also write this as:

$('[data-sales]');

Which makes it look as if [name] is a selector all on its own - it isn't as there is an implied universal type selector. This is the reason that these extra conditions are often called selectors in their own right.

You can also select attributes based on their values. All of the following select elements with an attribute "name" with a condition on the value that it is set to:

  • [name="value"]   set to "value
  • [name!="value"]  set to something not equal to "value" or doesn't have the specified attribute.
  • [name^="value"] set to a something that begins with "value"
  • [name$="value"] set to something that ends with "value"
  • [name*="value"] set to something that contains "value"
  • [name~="value"] set to something that contains the word "value" i.e. delimited by spaces.
  • [name|="value] set to something that is value or starts with "value-" i.e. prefixed with value.

For example

$('[data-sales^="2"]')

selects all elements with an attribute "data-sales" set equal to a value that starts with "2" - not generally useful!

Notice that the not-equal selector isn't quite as useful as it first appears. For example

$('[data-sales!="0"]')

doesn't select all the elements with data-sales attributes that are non-zero. It also selects all of the elements which don't have data-sales attributes.

The solution to this sort of problem is the multiple attribute selector.

If you write:

[attribute selector 1[[attribute selector 2]...

then all of the selectors are applied i.e. the selected elements have to satisfy the "and" of the attribute selectors.

For example to select all elements with data-sales attributes that are non-zero you would use:

$('[data-sales][data-sales!="0"]')

Notice that attribute values are regarded as strings and so a data-sales attribute set to "00" is not equal to "0".

It is also worth knowing that the != attribute selector isn't a CSS selector which means that jQuery has to implement it from scratch and this makes it a more time consuming process.

There is a lot more to say about jQuery's extensions to the basic selectors.

Class And ID Revisited

The selectors that we have been using right from the start i.e. the class and id selectors are just special cases of the general ideas that we have been looking at. CSS defines two additional selectors T.name which selects all <T> elements with the attribute class=name and T#name which selects the <T> element with the attribute id=name.

You can see that using the default universal type selector this means you can write selectors without specifying a type so that .name selects all elements with the attribute class=name and #name selects all elements with the attribute id=name.

However, you can now also see that you can select elements according to class and id using:

$('[class='bigdivs']"

and:

$("[id='mydiv']")

There are some other shortcuts defined in CSS and jQuery for commonly used selectors.

The CSS Pseudo Classes

If we are restricting our attention to CSS selectors, there are only a few left - referred to as pseudo classes for reasons that aren't particularly important. Also, all they really have in common is that they start with a colon.

jQuery, however, only supports one of the CSS pseudo classes because the rest don't make a lot of sense in the context of JavaScript. For example, there is a :hover selector in CSS, but using this as a jQuery selector would be very strange. Instead jQuery provides a hover function which is used to set up event handlers.

The one CSS pseudo class that jQuery supports is:

T:first-child

which selects all <T> that are the first child of their parent, i.e. that come immediately after their container's definition.

For example

$("p:first-child")

selects any <p> elements that are the first child of any other element.

This one example of a CSS pseudo class giving rise to lots of others that jQuery adds to the selectors you can use.
 

Combining Selectors

jQuery lets you combine complete selectors using the rules given for the type selectors listed earlier. That is, you can write things like

$("div[data-sales] p");

 selects all <p> elements that are contained within a <div> element with a data-sales attribute. 

You can see that this has the potential to become very complicated very quickly. Especially when you add all of the extra selector types that jQuery adds to the mix.

There is a great deal of similarly between writing selectors for jQuery and writing regular expressions in JavaScript. There is a tendency to want to write a single compact selector that does all the work. A big problem is in testing such selectors to make sure that they select the cases you want to select and no more.

If you find that you are writing very complicated selectors you need to ask if it is really necessary. If it is, consider using the filter approach - build up an array of element that is bigger than you desire and then use the filter method to remove the ones you don't need. More about filters in a later article.

justjquery

Just jQuery

 

 

To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, Facebook, Google+ or Linkedin,  or sign up for our weekly newsletter.

 

Banner


Just JavaScript - The Prototype Mechanism

The prototype is about the most mysterious part of JavaScript. Once you have mastered the call context and the constructor, it is the prototype that you have to turn to. How does it work? How do you u [ ... ]



Getting Started With jQuery - Advanced Filters

When you first encounter filters they seem easy enough - just extract the results you want from the results you have. The trouble is that filters are fun and jQuery pushes the idea beyond the obvious. [ ... ]


Other Articles

 

blog comments powered by Disqus

 



Last Updated ( Sunday, 09 November 2014 )
 
 

   
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.