How to Use CSS Selectors in Selenium to Locate the nth Child Element?

When using Selenium for automated testing, CSS selectors are a powerful tool, especially when you want to locate specific elements on the page.

Suppose we want to locate the nth child element under a parent element; we can use the :nth-child() pseudo-class in CSS selectors to achieve this.

For example, consider a list where each list item is contained within <li> tags, and these <li> tags are nested within a <ul> tag. If we want to select the third list item, we can use the following CSS selector:

css
ul > li:nth-child(3)

In Selenium, we can use the following Python code to locate this element and interact with it, such as clicking it:

python
from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://example.com")  # Assume this is your webpage URL

# Use CSS selector to find the third child element
third_item = driver.find_element_by_css_selector("ul > li:nth-child(3)")
third_item.click()  # Click on the third child element

In this example, :nth-child(3) selects the third <li> element under the parent <ul> element. Note that the numbering for nth-child starts from 1, not from 0.

This approach is particularly useful because it allows us to precisely locate any specific item in the list without relying on other element properties (such as id or class), which may change over time or differ across pages.