CSS pseudo-classes for selection in Selenium Python - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select the first child element using CSS pseudo-class.

Selenium Python

element = driver.find_element(By.CSS_SELECTOR, 'ul li[1]')

Drag options to blanks, or click blank then click option'

A:first-child

B:last-child

C:nth-child(2)

D:hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using :last-child instead of :first-child

Using :hover which is for mouse actions

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

2fill in blank

medium

Complete the code to select all even child elements using CSS pseudo-class.

Selenium Python

elements = driver.find_elements(By.CSS_SELECTOR, 'div.item[1]')

Drag options to blanks, or click blank then click option'

A:odd

B:first-of-type

C:nth-child(even)

D:last-of-type

Attempts:

3 left

💡 Hint

Common Mistakes

Using :odd instead of :nth-child(even)

Using :first-of-type which selects only the first element

The :nth-child(even) pseudo-class selects all even-numbered children.

3fill in blank

hard

Fix the error in the code to select the last child element using CSS pseudo-class.

Selenium Python

element = driver.find_element(By.CSS_SELECTOR, 'table tr[1]')

Drag options to blanks, or click blank then click option'

A:first-child

B:lastchild

C:nth-last-child(1)

D:last-child

Attempts:

3 left

💡 Hint

Common Mistakes

Missing hyphen in :last-child

Using :first-child instead of last-child

The correct pseudo-class is :last-child with a hyphen, not :lastchild.

4fill in blank

hard

Fill both blanks to select every 3rd child starting from the first using CSS pseudo-class.

Selenium Python

elements = driver.find_elements(By.CSS_SELECTOR, 'ul li[1]([2])')

Drag options to blanks, or click blank then click option'

A:nth-child

B3n+1

C2n

D:nth-of-type

Attempts:

3 left

💡 Hint

Common Mistakes

Using :nth-of-type instead of :nth-child

Using 2n instead of 3n+1

The :nth-child(3n+1) selects every 3rd child starting from the first.

5fill in blank

hard

Fill all three blanks to select all list items except the first and last using CSS pseudo-classes.

Selenium Python

elements = driver.find_elements(By.CSS_SELECTOR, 'ul li:not([1]):not([2])[3]')

Drag options to blanks, or click blank then click option'

A:first-child

B:last-child

C:hover

D:nth-child(n)

Attempts:

3 left

💡 Hint

Common Mistakes

Using :hover which is unrelated

Not excluding both first and last children

Using :not(:first-child):not(:last-child):nth-child(n) selects all list items except the first and last.

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