Getting Started With jQuery - CSS Selectors
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:


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:


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


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


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


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:


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 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:




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:


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

For example


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.




Chapter List 

  1. The DOM
  2. CSS Selectors
  3. Filters
  4. Advanced Filters
  5. Manipulating The DOM
  6. Promises & Deferred
  7. Promises, Deferred & WebWorkers
  8. Ajax the Basics - get
  9. Ajax the Basic -  post
  10. Ajax - Advanced Ajax To The Server 
  11. Ajax - Advanced Ajax To The Client
  12. Ajax - Advanced Ajax Transports And JSONP
  13. Ajax - Advanced Ajax The jsXHR Object
  14. Ajax - Advanced Ajax Character Coding And Encoding
  15. jQuery - Easy Plugins
  16. jQuery UI
  17. jQuery UI Custom Control - Widget Factory
  18. Getting Started With QUnit Testing


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.



Just JavaScript - The Function Object

The function object is the most important object in all of JavaScript and yet we tend to forget that it is an object. Understanding that JavaScript functions are objects is probably the most important [ ... ]

Just JavaScript - Functions Scope, Lifetime and Closure

When you first meet it closure seems like the craziest of ideas. However once you realize that JavaScript functions are objects and what this implies then it seems like a natural consequence.

Other Articles






or email your comment to:


Last Updated ( Saturday, 06 August 2016 )

Copyright © 2018 All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.