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.

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