CSS pseudo-classes for selection in Selenium Python

Introduction

CSS pseudo-classes help you pick specific elements on a webpage based on their state or position. This makes testing easier and more precise.

When you want to select the first or last item in a list to check its content.

When you need to test how a button looks when hovered over or clicked.

When you want to find input fields that are currently focused during a test.

When you want to select elements that are odd or even in a group to verify styling.

When you want to test links that have been visited or not.

Syntax

Selenium Python

driver.find_element(By.CSS_SELECTOR, 'selector:pseudo-class')

Use By.CSS_SELECTOR with Selenium to apply CSS pseudo-classes.

Pseudo-classes start with a colon : after the normal CSS selector.

Examples

Selects the first <li> item inside a <ul> list.

Selenium Python

driver.find_element(By.CSS_SELECTOR, 'ul li:first-child')

Selects a button when the mouse is hovering over it (useful for visual tests).

Selenium Python

driver.find_element(By.CSS_SELECTOR, 'button:hover')

Selects an input field that currently has focus (cursor inside it).

Selenium Python

driver.find_element(By.CSS_SELECTOR, 'input:focus')

Selects all even rows in a table for testing alternate row styles.

Selenium Python

driver.find_elements(By.CSS_SELECTOR, 'tr:nth-child(even)')

Sample Program

This script opens a small HTML page with a list. It uses the :first-child pseudo-class to find the first list item and prints its text.

Selenium Python

from selenium import webdriver
from selenium.webdriver.common.by import By

# Setup WebDriver (make sure driver executable is in PATH)

# Open a simple test page
html = '''
<html>
  <body>
    <ul>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ul>
  </body>
</html>
'''

# Load the HTML content
from selenium.webdriver.chrome.options import Options
options = Options()
options.add_argument('--headless')
driver = webdriver.Chrome(options=options)
driver.get('data:text/html;charset=utf-8,' + html)

# Find the first list item using CSS pseudo-class
first_item = driver.find_element(By.CSS_SELECTOR, 'ul li:first-child')
print(first_item.text)

driver.quit()

Important Notes

Not all pseudo-classes work in Selenium because some depend on user interaction (like :hover), which may need special actions.

Use find_elements to get multiple elements matching a pseudo-class like :nth-child.

Always test your CSS selectors in browser DevTools first to make sure they select the right elements.

Summary

CSS pseudo-classes let you select elements based on position or state.

Use them in Selenium with By.CSS_SELECTOR for precise element selection.

They help make your tests more focused and reliable.

Practice

1. Which CSS pseudo-class would you use to select the first child element of a parent in Selenium?

easy

A. :last-child

B. :first-child

C. :nth-child(2)

D. :hover

Solution

1. Step 1: Understand the meaning of :first-child

   The :first-child pseudo-class selects the very first child element of its parent.

2. Step 2: Compare with other options

   :last-child selects the last child, :nth-child(2) selects the second child, and :hover is for mouse hover state, not position.

3. Final Answer:

   :first-child -> Option B

4. Quick Check:

   First child selector = :first-child [OK]

Hint: First child is always :first-child in CSS selectors [OK]

Common Mistakes:

• Confusing :first-child with :nth-child(1)
• Using :hover for position selection
• Mixing :last-child with :first-child

2. Which of the following is the correct syntax to select all even-numbered list items using CSS pseudo-classes in Selenium?

easy

A. li:nth-child(odd)

B. li:nth-child(2n+1)

C. li:nth-of-type(odd)

D. li:nth-child(even)

Solution

1. Step 1: Understand nth-child(even)

   The selector li:nth-child(even) selects all list items at even positions: 2, 4, 6, etc.

2. Step 2: Check other options

   li:nth-child(2n+1) and li:nth-child(odd) select odd positions, li:nth-of-type(odd) selects odd elements but by type, which may differ.

3. Final Answer:

   li:nth-child(even) -> Option D

4. Quick Check:

   Even items = nth-child(even) [OK]

Hint: Use nth-child(even) to select even positions easily [OK]

Common Mistakes:

• Using odd instead of even
• Confusing nth-child with nth-of-type
• Wrong formula like 2n+1 for even

3. Given the HTML:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <li>Date</li>
</ul>

What text will be selected by the CSS selector ul li:nth-child(3) in Selenium?

medium

A. Cherry

B. Banana

C. Date

D. Apple

Solution

1. Step 1: Understand nth-child(3) selector

   The selector ul li:nth-child(3) selects the third child li element inside the ul.

2. Step 2: Identify the third li element

   The third li element is <li>Cherry</li> as it is the third item in the list.

3. Final Answer:

   Cherry -> Option A

4. Quick Check:

   Third child text = Cherry [OK]

Hint: Count list items from 1 to find nth-child(n) [OK]

Common Mistakes:

• Counting from zero instead of one
• Selecting nth-of-type instead of nth-child
• Confusing order of list items

4. You wrote this Selenium locator: driver.find_element(By.CSS_SELECTOR, 'div:nth-child(0)'). Why does it fail and how to fix it?

medium

A. nth-child index starts at 1, so 0 is invalid; use 'div:nth-child(1)' instead

B. nth-child accepts zero, but div has no children; add children first

C. CSS selector syntax error; use 'div:first-child' instead

D. Selenium does not support nth-child; use XPath instead

Solution

1. Step 1: Check nth-child index rules

   nth-child indexes start at 1, so 0 is invalid and causes a syntax error.

2. Step 2: Correct the selector

   Replace 'div:nth-child(0)' with 'div:nth-child(1)' to select the first child div correctly.

3. Final Answer:

   nth-child index starts at 1, so 0 is invalid; use 'div:nth-child(1)' instead -> Option A

4. Quick Check:

   nth-child index ≥ 1 [OK]

Hint: nth-child numbering starts at 1, never zero [OK]

Common Mistakes:

• Using zero as nth-child index
• Assuming nth-child works like array index
• Thinking Selenium lacks nth-child support

5. You want to select all buttons except the first one inside a form using Selenium CSS selectors. Which selector correctly achieves this?

hard

A. form button:not(:first-child)

B. form button:nth-child(n+2)

C. form button:nth-of-type(n+2)

D. form button:not(:nth-child(1))

Solution

1. Step 1: Understand the difference between nth-child and nth-of-type

   nth-child counts all types of children, nth-of-type counts only elements of the specified type (button).

2. Step 2: Select buttons except the first one

   Using 'form button:nth-of-type(n+2)' selects all button elements starting from the second button, ignoring other element types.

3. Step 3: Why other options fail

   :not(:first-child) excludes elements that are the first child of their parent, but if the first child is not a button, it won't exclude the first button. Similarly, :nth-child(n+2) counts all children, not just buttons, so it may skip buttons if other elements are present.

4. Final Answer:

   form button:nth-of-type(n+2) -> Option C

5. Quick Check:

   Use nth-of-type for type-specific position [OK]

Hint: Use nth-of-type(n+2) to skip first element of that type [OK]

Common Mistakes:

• Using nth-child instead of nth-of-type
• Using :not(:first-child) which may exclude wrong elements
• Assuming first-child always matches first button