CSS selector syntax in Selenium Python - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Identify the element selected by this CSS selector

Given the HTML snippet:

<div class="container">
  <ul>
    <li class="item active">Home</li>
    <li class="item">About</li>
    <li class="item">Contact</li>
  </ul>
</div>

Which element will be selected by the CSS selector .container ul li.active?

A The <div> element with class 'container'

B The <ul> element inside the container

C The <li> element with text 'Home'

D All <li> elements with class 'item'

💡 Hint

Look for the element with class 'active' inside the container's list items.

The selector '.container ul li.active' targets <li> elements with class 'active' inside a <ul> inside an element with class 'container'. Only the first <li> has class 'active', so it is selected.

❓ selector

intermediate

Which CSS selector matches all direct child paragraphs?

Consider this HTML:

<div>
  <p>First paragraph</p>
  <section>
    <p>Nested paragraph</p>
  </section>
</div>

Which CSS selector will select only the paragraphs that are direct children of the <div>?

A div p

B div ~ p

C div + p

D div > p

💡 Hint

The '>' symbol means direct child in CSS selectors.

The selector 'div > p' selects only <p> elements that are direct children of <div>. 'div p' selects all descendants, including nested ones.

❓ selector

advanced

What is the output of this CSS selector in Selenium?

Given this HTML:

<ul>
  <li id="first" class="item">One</li>
  <li class="item special">Two</li>
  <li class="item">Three</li>
</ul>

What element(s) will be selected by the CSS selector li.item.special in Selenium?

A The &lt;li&gt; element with text 'Two'

B All &lt;li&gt; elements with class 'item'

C The &lt;li&gt; element with id 'first'

D No elements will be selected

💡 Hint

Look for elements with both classes 'item' and 'special'.

The selector 'li.item.special' matches <li> elements that have both 'item' and 'special' classes. Only the second <li> matches.

❓ selector

advanced

Which CSS selector will select the last child element?

Given this HTML:

<div>
  <p>First</p>
  <p>Second</p>
  <p>Third</p>
</div>

Which CSS selector will select only the last <p> element inside the <div>?

A div p:last-of-type

B div p:last-child

C div p:nth-child(3)

D div p:nth-last-child(1)

💡 Hint

The ':last-child' pseudo-class selects the last child of its parent.

The selector 'div p:last-child' selects <p> elements that are the last child of their parent inside the div. The last <p> is the last child, so it is selected.

❓ selector

expert

What error occurs with this invalid CSS selector in Selenium?

Consider this CSS selector used in Selenium:

div#main > ul li:first-child::before

What error will Selenium raise when trying to find elements with this selector?

A NoSuchElementException because no matching elements exist

B InvalidSelectorException due to unsupported pseudo-element '::before'

C TimeoutException due to slow page load

D StaleElementReferenceException because element changed

💡 Hint

Selenium does not support pseudo-elements like '::before' in CSS selectors.

Selenium throws InvalidSelectorException when a CSS selector contains pseudo-elements like '::before' because they cannot be used to locate elements in the DOM.

Practice

1. Which CSS selector will select all elements with the class button?

easy

A. .button

B. #button

C. button

D. *button

Solution

1. Step 1: Understand class selector syntax

   In CSS, a class selector uses a dot . followed by the class name to select elements with that class.

2. Step 2: Match the selector to the class button

   The selector .button selects all elements with class button.

3. Final Answer:

   .button -> Option A

4. Quick Check:

   Class selector = .classname [OK]

Hint: Class selectors start with a dot (.) [OK]

Common Mistakes:

• Using # for class instead of .
• Using tag name without dot
• Using * which is universal selector

2. Which CSS selector correctly selects an element with the ID main-header?

easy

A. *#main-header

B. .main-header

C. main-header

D. #main-header

Solution

1. Step 1: Understand ID selector syntax

   ID selectors use a hash # followed by the ID name to select a unique element.

2. Step 2: Match selector to ID main-header

   The selector #main-header selects the element with ID main-header.

3. Final Answer:

   #main-header -> Option D

4. Quick Check:

   ID selector = #idname [OK]

Hint: ID selectors start with a hash (#) [OK]

Common Mistakes:

• Using dot (.) for ID instead of hash (#)
• Using tag name without prefix
• Adding * before ID selector unnecessarily

3. Given this HTML snippet:

<div class='container'>
  <button id='submit' class='btn primary'>Send</button>
</div>

Which CSS selector will select the button element inside the div with class container?

medium

A. container > button.primary

B. div.container button

C. #submit.container

D. button#submit .container

Solution

1. Step 1: Understand descendant selector

   div.container button selects any button inside a div with class container.

2. Step 2: Check other options for correctness

   container > button.primary incorrectly targets a <container> tag (missing dot for class selector). #submit.container is invalid because ID and class cannot be combined like that without space. button#submit .container looks for .container inside button#submit, which is wrong.

3. Final Answer:

   div.container button -> Option B

4. Quick Check:

   Descendant selector = parent child [OK]

Hint: Space means descendant, > means direct child [OK]

Common Mistakes:

• Confusing descendant and child selectors
• Combining ID and class without space
• Wrong order of selectors

4. You want to select all input elements with attribute type='text'. Which CSS selector is correct?

medium

A. All of the above

B. input[type='text']

C. input[type="text"]

D. input[type=text]

Solution

1. Step 1: Understand attribute selector syntax

   CSS attribute selectors can use quotes or no quotes around the value. Both input[type=text] and input[type='text'] are valid.

2. Step 2: Confirm all options are valid

   Using double quotes input[type="text"] is also valid. So all three selectors correctly select input elements with type='text'.

3. Final Answer:

   All of the above -> Option A

4. Quick Check:

   Attribute selectors allow quotes or no quotes [OK]

Hint: Quotes optional in attribute selectors [OK]

Common Mistakes:

• Using incorrect attribute syntax
• Forgetting quotes when value has spaces
• Using wrong attribute name

5. You want to select all li elements that are the first child of their parent ul. Which CSS selector should you use?

hard

A. ul li:first-child

B. ul li:first-of-type

C. ul > li:first-child

D. li:first-child

Solution

1. Step 1: Understand child combinator and pseudo-class

   ul > li:first-child selects li elements that are the first child directly under ul.

2. Step 2: Compare other options

   ul li:first-child selects any li that is first child of its parent inside any ul descendant (could be nested). li:first-child selects any li that is first child anywhere. ul li:first-of-type selects first li of its type inside ul, but not necessarily first child.

3. Final Answer:

   ul > li:first-child -> Option C

4. Quick Check:

   Direct child + first-child pseudo-class = ul > li:first-child [OK]

Hint: Use > for direct child, :first-child for first element [OK]

Common Mistakes:

• Confusing :first-child and :first-of-type
• Missing direct child combinator >
• Selecting nested elements unintentionally