jQuery first-child Selector

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.

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 :last-child Selector

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

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

jQuery :first-of-type Selector

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

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.

jQuery :last-of-type Selector

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

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

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.

jQuery :nth-child() Selector

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

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

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

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