Questions And Answers

More Tutorials

Jquery Types of Selectors

In jQuery you can select elements in a page using many various properties of the element, including:

Possession of Attribute
Attribute Value
Indexed Selector

If you know CSS selectors you will notice selectors in jQuery are the same (with minor exceptions).
Take the following HTML for example:

<a href="index.html"></a> <!-- 1 -->
<a id="second-link"></a> <!-- 2 -->
<a class="example"></a> <!-- 3 -->
<a class="example" href="about.html"></a> <!-- 4 -->
<span class="example"></span> <!-- 5 -->

Selecting by Type:

The following jQuery selector will select all elements, including 1, 2, 3 and 4.


Selecting by Class

The following jQuery selector will select all elements of class example (including non-a elements), which are 3, 4 and 5.


Selecting by ID

The following jQuery selector will select the element with the given ID, which is 2.


Selecting by Possession of Attribute

The following jQuery selector will select all elements with a defined href attribute, including 1 and 4.


Selecting by Attribute Value

The following jQuery selector will select all elements where the href attribute exists with a value of index.html, which is just 1.


Selecting by Indexed Position (Indexed Selector)

The following jQuery selector will select only 1, the second
ie. the second-link because index supplied is 1 like eq(1) (Note that the index starts at 0 hence the second got selected here!).


Selecting with Indexed Exclusion

To exclude an element by using its index :not(:eq())

The following selects
elements, except that with the class example, which is 1


Selecting with Exclusion

To exclude an element from a selection, use :not()
The following selects
elements, except those with the class example, which are 1 and 2.


Selecting by Pseudo-state

You can also select in jQuery using pseudo-states, including :first-child, :last-child, :first-of-type, :lastof-type, etc.
The following jQuery selector will only select the first
element: number 1.


Combining jQuery selectors

You can also increase your specificity by combining multiple jQuery selectors; you can combine any number of them or combine all of them. You can also select multiple classes, attributes and states at the same time.


This would select an < a > element that:
Has the following classes: class1, class2, and class3
Has the following ID: someID
Has the following Attribute: attr1
Has the following Attributes and values: attr2 with value something, attr3 with value something
Has the following states: first-child and first-of-type
You can also separate different selectors with a comma:

$("a, .class1, #someID")

This would select:

All < a > elements
All elements that have the class class1
An element with the id #someID
Child and Sibling selection
jQuery selectors generally conform to the same conventions as CSS, which allows you to select children and siblings in the same way.

To select a non-direct child, use a space
To select a direct child, use a >
To select an adjacent sibling following the first, use a +
To select a non-adjacent sibling following the first, use a ~

Wildcard selection

There might be cases when we want to select all elements but there is not a common property to select upon (class, attribute etc). In that case we can use the * selector that simply selects all the elements:

$('#wrapper *') // Select all elements inside #wrapper element


In this page (written and validated by ) you learned about Jquery Types of Selectors . What's Next? If you are interested in completing Jquery tutorial, your next topic will be learning about: Jquery Caching Selectors.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.