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:
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.
Please comment below to feedback or ask questions.
Locating different elements using a single CSS path will be explained in the next post.
