jQuery Child Filter Selectors

Last Updated Jul 21, 2015, 12:00:06 PM





jQuery first-child Selector

jQuery first-child selector is used to select all the HTMLelements which are the first child of their parent.

Syntax

If there are too many elements on a page, jquery :first-child selector can be used to select the first element of each parent in the web page. It will come in handy when you start working with different web pages.

Example HTML

In the above HTML code, we have three different div tags which have two elements in each. In the first div tag, the element First Child paragraph is the first-child of its parent div.


In the second div element Apple is the first child element of it's parent div

In the third div tag First Child in Third Div is the first child element of it's parent div

Using the jQuery first-child selector see how we select the first-child elements and apply different colors to the first-child elements in the below jQuery example

jQuery
Output
jQuery first-child selector

Try It Now

jQuery :last-child Selector

jQuery last-child selector is used to select all the last-child elements of its parent.

Syntax

Note: :last matches only a single element, :last-child can match more than one: one for each parent.

Example

Find the last span in each matched div and add some css hover effect.

jQuery
Output
jquery last-child selector

Try It Now

jQuery :first-of-type Selector

jQuery :first-of-type selector used to select the first of type element if there are more than one element in the same parent.

Syntax

When there are multiple elements with the same content or same value, jquery :first-of-type selector will select the first element of its type

Example

It will find the first span in each matched div and add a class to it.


In the above HTML code we have the span element Tom 4 times in the first parent and in the second div we have Rupee span element 3 times. Using the below jQuery :first-of-type selector we can select the first occurence of Tom, Rupee and apply blue color to both.

Output
jQuery first-of-type selector

Try It Now

jQuery :last-of-type Selector

jQuery :last-of-type selector matches elements that have no other element with both the same parent and the same element name coming before it in the document tree.

It works similar to jQuery :first-of-type selector but the only difference is it selects the last element

Syntax

If there are multiple elements with the same content or same value, jquery :last-of-type selector will select the last element of its type

Example

It will find the last span in each matched div and add a class to it.

if you notice the above code, there you see some elements named Tom and Rupee three times. But it only selected the last of its type.

Output
jQuery last-of-type selector

Try It Now

jQuery :nth-child() Selector

Matches all elements that are the nth-child of their parent

Syntax

index: The index of each child to match, starting with 0

Example

The below example selects every second element in each parent of second child, in our case :nth-child(2)


In the above HTML the jquery :nth-child selector will select every second element

Output
jquery nth-child selector

Try It Now

Other Advanced jQuery Selectors you might want to learn

jQuery Complete Selectors Reference
jQuery Selectors
jQuery Basic Selectors
jQuery Child Selectors
jQuery Content Filter Selectors


Sources and Credits

The content and methods in the tutorial has been referred and updated with jQuery API and The jQuery Foundation

Last Updated Jul 21, 2015, 12:00:06 PM