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.