95. Locating first child, last child and nth child with CSS path






We can locate the first, last and nth child elements by using *:first-child , *:last-child and *:nth-child(Number) notations in CSS path.

 Examples:

 body  > *:first-child     -> Locates the first child element under the body tag
body > *:last-child       -> Locates the last child element under the body tag
body > *:nth-child(2)   -> Locates the 2nd child element under the body tab

 Lets Implement 

 1. Open http://compendiumdev.co.uk/selenium/basic_web_page.html in Firefox Browser
2. Right click on the page and select the 'View Page Source' option as shown below:

3. Observe that the Page Source of the page is displayed as shown below:


4. In the page source code, observe that there are only two <p> tag elements under the <body> tag as shown below:


Now lets locate the first child element under the <body> tag using *:first-child notation in CSS path as  explained in the below steps:

 1. Open http://compendiumdev.co.uk/selenium/basic_web_page.html in Firefox Browser
2. Click on the 'Firepath' tab, select the CSS option, enter the CSS path body > *:first-child into the text box as shown below and click on 'Eval' button:

3. Observe that the first child element on the body of the web page is highlighted as shown below:

Now lets locate the last child element under the <body> tag using *:last-child notation in CSS path as  explained in the below steps:
1. Open http://compendiumdev.co.uk/selenium/basic_web_page.html in Firefox Browser
2. Click on the 'Firepath' tab, select the CSS option, enter the CSS path body > *:last-child into the text box as shown below and click on 'Eval' button:


3. Observe that the last child element on the body of the web page is highlighted as shown below:

Now lets locate the 2nd child element under the <body> tag using *:nth-child(2) notation in CSS path as  explained in the below steps:
1. Open http://compendiumdev.co.uk/selenium/basic_web_page.html in Firefox Browser
2. Click on the 'Firepath' tab, select the CSS option, enter the CSS path body > *:nth-child(2)  into the text box as shown below and click on 'Eval' button:

3. Observe that the second child element on the body of the web page is highlighted as shown below:


Now lets locate the first child element under the <head> tag using *:first-child notation in CSS path as  explained in the below steps:
1. Open http://compendiumdev.co.uk/selenium/basic_web_page.html in Firefox Browser
2. Click on the 'Firepath' tab, select the CSS option, enter the CSS path head > *:first-child  into the text box as shown below and click on 'Eval' button:


3. Observe that the first child element on the head section of the web page is highlighted as shown 
below:



So using *:first-child, *:last-child and *:nth-child(number) notations in CSS path, we can locate the child elements of any element. In this post we have located the child elements of  body and head elements. 

Please comment below to feedback or ask questions.

Locating different elements using a single CSS path will be explained in the next post.




Labels:

4 comments:

Subscribe to: Post Comments (Atom)

Followers

Labels