nth Child Selector

Instead of defining how nth chiild selector work, we will proceed by example. Let us assume thae your have a webpage that has a heirarchy. A typical heirarchy may consist of for example, header element and then paragraphs. If we wish to select every <h;p> element that is the second child of its parent element, then we can do it using


Let us take a look at the example

<!DOCTYPE html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

<h1>Reference Designer jQuery nth-child example</h1>
<a href ="http://referencedesigner.com">Link1 - second chile of body </a><br />
<a href ="http://www.referencedesigner.com/tutorials/jquery/jq_1.php">Link2 - jquery tutorial - 3rd child of body </a><br />
<br />

<div style="border:2px solid;">
<span> span element in 1st div</span>
<a href ="http://referencedesigner.com"> Link1 - second child of div </a> 
<a href ="http://www.referencedesigner.com/tutorials/js/js_1.php"> Link2 - js tutorial  </a>
<a href ="http://referencedesigner.com"> ReferenceDesigner</a>


<div style="border:1px solid;">
<a href ="http://referencedesigner.com"> Link1 - 1st child of second div </a>
<a href ="http://www.referencedesigner.com/tutorials/js/js_1.php"> 2nd child - js tutorial  </a>
<a href ="http://referencedesigner.com"> ReferenceDesigner</a>

<h1> second header </h1>
<p>Para 2</p>
<p>Para 3</p>

You may like to make changes in the index in the above example to see the effects.

You may like to try this example here.