JQuery Child Filters

JQuery Child Filters are use to select children of selected parent element depending on selected criteria.

1) jQuery(":first-child")

Select All first elements which are children of selected parent element.

In example below 

$("div span").addClass("heads");

We applied class to each and every span under div.

To remove class from only first span under all div we will apply :first-child filter.

$("div span:first-child").removeClass("heads");

2) jQuery(":last-child")

Select All last elements which are children of selected parent element.

In example below 

$("div span").addClass("heads");

We apply class to each and every span under div.

To remove class from only last span under all div we will apply :last-child filter.

$("div span:last-child").removeClass("heads");

3) jQuery(":only-child")

Supose if parent have multiple children, which can be single, none or more than one

we want to select only those elements having count one i.e single child to parent. 

Following example will apply blue border to those span which are alone with in parent div.

4) jQuery(":nth-child(index/even/odd/equation)") filter

Selects all elements that are the nth-child of their parent.

index: Here index of each element will be starts with 1.

even: select elements having even index.

odd: select elements having odd index.

equation: xn+y 

Here x,y can be any numeric number.

n is same like index begins counting index from 0.

index: Following example will apply red border to first span under div.

even: following example apply red border to all event span.

odd: Following example will apply red border to all odd span.

equation(2n): following example will apply red border to all even span having index as follow.

2 X 1 = 2

2 X 2 = 4

2 X 3 = 6

and so on..

equation (2n+1):In example below, red border will be apply on following valued index i.e. all odd span elements.

2 X 0 + 1 = 1

2 X 1 + 1 = 3

2 X 2 + 1 = 5

2 X 3 + 1 = 7

and so on..

5) jQuery(":nth-last-child(index/even/odd/equation)")

This filter will work same like :nth-child only difference is that counter starts counting elements from last element to first element in reverse order.

index: Here index of each element will be starts with 1 from botom to top.

even: select elements having even index starts from last element.

odd: select elements having odd index starts from last element.

equation: xn+y 

Here x,y can be any numeric number.

n is same like index begins counting index from 0 count will begins from last element.

following example will select all even elements from last to first in each and every div. 

i.e. 1,3  5,7  10  12,14

Type Child Filters : Selects elements by given element type.

6) jQuery(":first-of-type")

Selects all elements that are the first among siblings of the same element name.

Following example will apply red border on 1,6,9 and 13.

7) jQuery(":last-of-type")

Selects all elements that are the last among siblings of the same element name.

Following example will apply red border on 4,8,11 and 15.

8) jQuery(":nth-of-type(index/even/odd/equation)")

Selects all elements that are the nth child of their parent in relation to siblings with the same given element type (name).

index: Here index of each element will be starts with 1.

even: select elements having even index.

odd: select elements having odd index.

equation: xn+y 

Here x,y can be any numeric number.

n is same like index begins counting index from 0.

following example will select even index element of every div.

i.e. (2,4) (6,8) (10) (13,15)

odd: In given example replace even with odd.

$("span:nth-of-type(odd)").css("border", "1px solid #f00");

it will select odd index element of every div.

i.e. (1,3) (5,7) (9,11) (12,14)

2n:

In given example replace even with 2n.

$("span:nth-of-type(2n)").css("border", "1px solid #f00");

it will select 

(2,4) (6,8) (10) (13,15)

2n+1:

In given example replace even with 2n+1.

$("span:nth-of-type(2n)").css("border", "1px solid #f00");

it will select odd element from every div.

i.e. (1,3) (5,7) (9,11) (12,14) 

9) jQuery(":nth-last-of-type(index/even/odd/equation)")

Selects all the elements that are the nth-child of their parent in relation to siblings with the same element name, counting from the last element to the first.

index: Here index of each element will be starts with 1 from botom to top.

even: select elements having even index starts from last element.

odd: select elements having odd index starts from last element.

equation: xn+y 

Here x,y can be any numeric number.

n is same like index begins counting index from 0 count will begins from last element.

even: following example will select all event indexed element of same type from last to top.

i.e. (1,3) (5,7) (10) (12,14)

odd: Similarly in case of odd, replace even with odd in above given example.

$("span:nth-last-of-type(odd)").css("border", "1px solid #f00");

it will apply red border on (2,4) (6,8) (9,11) (13,15)

2n: Replace even with 2n in above given example.

$("span:nth-last-of-type(2n)").css("border", "1px solid #f00");

it will apply red border on (1,3) (5,7) (10) (12,14)

2n+1: Replace even with 2n in above given example.

$("span:nth-last-of-type(2n+1)").css("border", "1px solid #f00");

it will apply red border on 2,4) (6,8) (9,11) (13,15)

10) jQuery(":only-of-type") filter

Selects all elements that have no siblings with the same element name. It will select only alone siblings of parent with same element type (name).

In example bellow, we will apply border only for sigle sibling of given type 5,9,10.