A Beginner’s Guide to jQuery Selectors

As you may already know, CSS3 introduced a set of new selectors that allow us to select elements in the document with less HTML class addition. But, the new CSS selectors rely on the browser’s capability, making them not applicable in some cases. jQuery has a set of selectors, which could be an alternative way.

There are two reasons to use jQuery selectors instead of CSS. First, jQuery has covered the compatibility for older browsers that do not support particular type of CSS selectors. Second, when building an interactive feature, we may want to select elements upon user actions such as on a mouse click or on hover.

And using jQuery selectors is the felicitous way to do the job.

Index Selectors

Index selectors match elements based on its sequence. In CSS3 we have first-child() and last-child() selectors, which select the first and last elements. In jQuery, there are :eq(), :lt(), :gt(), :even(), and :odd().

Let’s say we have the following unordered list.

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li>List 4</li>
  <li>List 5</li>
</ul>

And we want to select the third <li> and add an HTML class. Using jQuery you can use :eq(). Remember that since JavaScript index starts at 0, the third <li> is actually the second at the index, giving you:

 $('td:eq(2)').addClass('selected');
 

Visibility Selectors

Visiblity selectors match the elements based on its visibility. So, we are able to select elements when they are visible or invisible. CSS3, at the moment does not have this kind of selectors.

In the following example, we have a <div> element that is hidden by assigning display: none;.

 <div style="display:none;">
 This is hidden
 </div>
 

To select the <div>, you can do it this way using :hidden selector.

 $('div:hidden').removeAttr('style');
 

The :hidden selector, however, does not work for elements that are hidden using visibility: hidden. It works when the element display mode is set to none like what we have shown above, or when the element width and height is set to 0.

To select visible elements, you can use :visible.

Element-Containing Selectors

Using jQuery we can also select elements when they are containing the specified element. Let’s say we have two <section>. One contains a heading, while the other does not contain anything. Using the :has selector we can select the <section> that contains the heading, as follows.

 $('section:has(h2)'').addClass('selected');
 

CSS3, at the moment, does not have a similar selector.

Text Containing Selectors

We can also select an element that contains specified text. Let’s say we have three paragraphs and we want to select only one that contains “Hello“, for example.

 <p>Hello</p>
 <p>World</p>
 

Using :contains() we can doing so this way.

 $('div:contains('World')'').addClass('world');
 

This will select the first and second paragraph. And note that the text value is case sensitive, meaning that “World” does not equal to “world”. So the text specified in the selector has to match the one at the selected element.

Animated Selector

Lastly, jQuery allows us to select element that is in the progress of an animation. jQuery provides a set of methods to animate element, for example .slideToggle(), .slideUp(), .slideDown(), .show() and .hide(). And we can use :animated selector to select the element that is animated with those method, like so.

 $('li:animated').addClass('animation');
 

Conclusion

CSS3 is indeed more advanced than CSS2 with some introduction of new selectors. But in particular cases, you may need to use jQuery selector instead of CSS, so if this is the case for you, I hope that this post could be helpful for your reference.