CSS pseudo-classes for selection in Selenium Python - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a CSS pseudo-class?

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the selected elements, like :hover for when a mouse is over an element.

beginner

How can you select the first child of a parent element using CSS pseudo-classes?

Use the :first-child pseudo-class to select the first child element of its parent.

intermediate

In Selenium with Python, how do you use a CSS pseudo-class in a locator?

You can use driver.find_element(By.CSS_SELECTOR, 'tag:pseudo-class') to locate elements matching the pseudo-class, for example, 'li:first-child'.

intermediate

What does the :nth-child(n) pseudo-class do?

It selects the nth child element of its parent, where n can be a number, keyword, or formula.

intermediate

Why should you prefer CSS pseudo-classes over XPath in Selenium for some selections?

CSS selectors with pseudo-classes are often faster and simpler for selecting elements based on position or state, improving test speed and readability.

Which CSS pseudo-class selects an element when the mouse pointer is over it?

A :hover

B :active

C :focus

D :visited

The :hover pseudo-class applies when the mouse pointer is over an element.

How would you select the third child of a list using CSS pseudo-classes?

A :only-child

B :last-child

C :first-child

D :nth-child(3)

:nth-child(3) selects the third child element.

In Selenium Python, which method is used to locate elements by CSS selector?

A driver.find_element(By.ID, 'selector')

B driver.find_element(By.CSS_SELECTOR, 'selector')

C driver.find_element(By.XPATH, 'selector')

D driver.find_element(By.CLASS_NAME, 'selector')

Use By.CSS_SELECTOR to locate elements with CSS selectors.

Which pseudo-class selects an element that is the only child of its parent?

A :only-child

B :first-child

C :last-child

D :nth-child(1)

:only-child selects an element that is the only child of its parent.

Why might CSS pseudo-classes be preferred over XPath in Selenium tests?

A They are slower but more readable

B XPath does not support pseudo-classes

C They are faster and simpler for certain selections

D CSS selectors cannot select by position

CSS selectors with pseudo-classes are often faster and simpler for selecting elements by position or state.

Explain how CSS pseudo-classes can help select elements in Selenium tests.

Think about how you pick elements based on their state or position.

Describe the difference between :first-child and :nth-child(n) pseudo-classes.

Consider how you pick the first item versus any specific item.

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