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

Challenge - 5 Problems

❓ selector

intermediate

Identify the element selected by this CSS selector

Given the HTML snippet below, which element will be selected by the CSS selector div.content > ul#list > li.item.active?

Selenium Java

<div class="content">
  <ul id="list">
    <li class="item">Item 1</li>
    <li class="item active">Item 2</li>
    <li class="item">Item 3</li>
  </ul>
  <ul id="other-list">
    <li class="item active">Item A</li>
  </ul>
</div>

A The <li> element with text 'Item A' inside the <ul> with id 'other-list'

B The <li> element with text 'Item 2' inside the <ul> with id 'list'

C All <li> elements with class 'item' inside any <ul>

D The <ul> element with id 'list'

💡 Hint

Look for the direct child combinator (>) and the id selector (#list).

The selector targets

elements with classes 'item' and 'active' that are direct children of the

with id 'list', which itself is a direct child of a
with class 'content'. Only 'Item 2' matches all these conditions.

❓ selector

intermediate

Which CSS selector matches all buttons except those with class 'disabled'?

Choose the CSS selector that selects all

A button:not(.disabled)

B button.disabled

C button > .disabled

D button + .disabled

💡 Hint

The :not() pseudo-class excludes elements matching the selector inside it.

The selector 'button:not(.disabled)' selects all

❓ selector

advanced

What is the output of this CSS selector in Selenium?

In Selenium Java, what element will be found by the CSS selector input[type='checkbox']:checked + label?

Selenium Java

<input type="checkbox" id="check1" checked>
<label for="check1">Option 1</label>
<input type="checkbox" id="check2">
<label for="check2">Option 2</label>

A The <input> elements that are unchecked

B All checked checkbox inputs

C All <label> elements regardless of checkbox state

D The <label> immediately following a checked checkbox input

💡 Hint

The + combinator selects the next sibling element.

The selector finds elements of type checkbox that are checked, then selects the immediately after them. So only the label for the checked checkbox is selected.

❓ selector

advanced

Which CSS selector correctly selects all elements inside a

with class 'main' but not inside any

?

Choose the CSS selector that selects all elements inside a

element with class 'main', but excludes any elements that are inside a

element.

A nav.main a:not(:has(footer))

B nav.main > a:not(footer a)

C nav.main a:not(:is(footer a))

D nav.main a:not(footer a)

💡 Hint

The :is() pseudo-class can be used to exclude specific nested selectors.

Option C uses :is() inside :not() to exclude elements that are descendants of

. Other options are invalid or do not exclude correctly.

❓ selector

expert

What error occurs when using this CSS selector in Selenium Java?

Consider the CSS selector div > p:first-child + span::before used in Selenium Java's By.cssSelector(). What happens when Selenium tries to find elements with this selector?

A Selenium throws an InvalidSelectorException because pseudo-elements (::before) are not supported

B Selenium throws a NoSuchElementException because no elements match

C Selenium finds all <p> elements that are the first child of a <div>

D Selenium finds all <span> elements that are immediately after the first <p> child of a <div>

💡 Hint

Selenium does not support selecting pseudo-elements like ::before.

Selenium's CSS selector engine does not support pseudo-elements such as ::before or ::after. Using them causes an InvalidSelectorException.