CSS pseudo-classes for selection in Selenium Python - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ locator

intermediate

Select the first visible button using CSS pseudo-classes

You want to select the first visible

A button:not([hidden]):first-of-type

B button:first-of-type:visible

C button:first-of-type:not([hidden])

D button:first-child:visible

💡 Hint

Remember that :visible is not a standard CSS pseudo-class and Selenium does not support it directly. Use attribute selectors to filter hidden elements.

CSS does not have a :visible pseudo-class. Selenium uses attribute selectors like [hidden] to filter elements. Option C correctly selects the first button that is not hidden.

❓ assertion

intermediate

Check if the third list item is selected using CSS pseudo-classes

You have a list with multiple

elements. You want to assert in Selenium that the third

element has the class 'selected'. Which CSS selector correctly targets this element?

A li.selected:nth-of-type(3)

B li.selected:nth-child(3)

C li:nth-of-type(3).selected

D li:nth-child(3).selected

💡 Hint

nth-child counts all children, nth-of-type counts elements of the same type.

Option D selects the third child

element that also has the class 'selected'. This matches the requirement exactly.

❓ Predict Output

advanced

Output of Selenium find_elements with :nth-last-child selector

Given the following HTML structure:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

What will be the number of elements found by Selenium using the CSS selector 'li:nth-last-child(2)'?

Selenium Python

elements = driver.find_elements(By.CSS_SELECTOR, 'li:nth-last-child(2)')
count = len(elements)
print(count)

A 2

B 1

C 0

D 4

💡 Hint

nth-last-child(2) selects the element that is the second last child of its parent.

Only the third

is the second last child of the

. So only one element matches.

🔧 Debug

advanced

Identify the error in this CSS selector for Selenium

You want to select all elements that are visible and are the last child of their parent. You wrote this selector:

input:visible:last-child

When running Selenium, it fails to find any elements even though such elements exist. What is the problem?

A :visible is not a valid CSS pseudo-class, causing the selector to fail

B :last-child must come before :visible in the selector

C input elements cannot be last-child in HTML

D The selector should use :last-of-type instead of :last-child

💡 Hint

Check which pseudo-classes are standard CSS and which are jQuery or Selenium extensions.

:visible is not a standard CSS pseudo-class and is not supported by Selenium CSS selectors. This causes the selector to fail.

❓ framework

expert

Best practice for waiting for an element matching a CSS pseudo-class in Selenium Python

You want to wait until the last

child of a container with id 'main' is visible before interacting with it in Selenium Python. Which approach correctly uses CSS pseudo-classes and Selenium's WebDriverWait?

Selenium Python

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

wait = WebDriverWait(driver, 10)

# Which code snippet below is correct?

A wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, '#main div:last-child')))

B wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, '#main div:last-of-type')))

C wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, '#main div:last-child:visible')))

D wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, '#main div:last-child:not([hidden])')))

💡 Hint

Use standard CSS pseudo-classes and Selenium's expected_conditions for visibility.

Option A correctly uses the standard CSS pseudo-class :last-child and Selenium's visibility_of_element_located to wait for visibility.

Option A uses :visible which is not a CSS pseudo-class. Option A uses :not([hidden]) which may work but visibility_of_element_located is more reliable.