CSS selector syntax in Selenium Python - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select an element by its ID using CSS selector.

Selenium Python

element = driver.find_element(By.CSS_SELECTOR, "#[1]")

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

Asubmit-button#

B.submit-button

Csubmit-button

Dsubmit-button.

Attempts:

3 left

💡 Hint

Common Mistakes

Including '.' before the ID name which is for classes.

Adding '#' inside the ID name string.

To select an element by ID in CSS selector, use '#' followed by the ID name without any extra characters.

2fill in blank

medium

Complete the code to select all elements with the class 'active' using CSS selector.

Selenium Python

elements = driver.find_elements(By.CSS_SELECTOR, "[1]active")

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

A#

B*

C>

D.

Attempts:

3 left

💡 Hint

Common Mistakes

Using '#' which is for IDs instead of '.' for classes.

Using '>' which is a child combinator, not a selector prefix.

To select elements by class in CSS selector, use '.' before the class name.

3fill in blank

hard

Fix the error in the CSS selector to select all <input> elements inside a form.

Selenium Python

inputs = driver.find_elements(By.CSS_SELECTOR, "form [1] input")

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

A+

B>

C.

D#

Attempts:

3 left

💡 Hint

Common Mistakes

Using '#' or '.' which do not select child elements.

Using '+' which selects adjacent siblings, not children.

The '>' symbol selects direct children in CSS selectors. To select input elements directly inside a form, use 'form > input'.

4fill in blank

hard

Fill both blanks to select all <li> elements that are direct children of <ul> with class 'menu'.

Selenium Python

items = driver.find_elements(By.CSS_SELECTOR, "ul[1]menu[2]li")

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

A.

B#

C>

Attempts:

3 left

💡 Hint

Common Mistakes

Using '#' instead of '.' for class selection.

Using space ' ' instead of '>' which selects all descendants, not just direct children.

'.menu' selects the class 'menu' on the

element, and '>' selects direct child
• elements.

5fill in blank

hard

Fill both blanks to select all <a> elements inside a <nav> with ID 'main' and class 'top'.

Selenium Python

links = driver.find_elements(By.CSS_SELECTOR, "nav[1]main[2]top a")

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

A#

B.

D>

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up '.' and '#' for class and ID selectors.

Using '>' which limits to direct children, not all descendants.

Use '#' for ID 'main', '.' for class 'top', and space ' ' to select all descendant elements inside the

.