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.

Practice

1. Which CSS selector syntax correctly selects an element with the id submitBtn?

easy

A. #submitBtn

B. .submitBtn

C. submitBtn

D. *submitBtn

Solution

1. Step 1: Understand CSS id selector syntax

   In CSS, the # symbol is used to select elements by their id attribute.

2. Step 2: Match the selector to the id

   The selector #submitBtn targets the element with id="submitBtn" exactly.

3. Final Answer:

   #submitBtn -> Option A

4. Quick Check:

   Id selector uses # = #submitBtn [OK]

Hint: Use # before id names to select by id [OK]

Common Mistakes:

• Using . instead of # for id
• Omitting # and using just the id name
• Using * which selects all elements

2. Which of the following is the correct CSS selector to select all elements with the class active?

easy

A. #active

B. *active

C. .active

D. active

Solution

1. Step 1: Recall CSS class selector syntax

   Classes are selected using a dot . followed by the class name.

2. Step 2: Identify the correct selector

   The selector .active selects all elements with class="active".

3. Final Answer:

   .active -> Option C

4. Quick Check:

   Class selector uses . = .active [OK]

Hint: Use . before class names to select by class [OK]

Common Mistakes:

• Using # instead of . for class
• Omitting . and using just class name
• Using * which selects all elements

3. Given the HTML snippet:

<input type="text" name="username" class="input-field" id="user" />

Which CSS selector will select this input element by its attribute name?

medium

A. input[name='username']

B. input#username

C. input.class='input-field'

D. input[name=username]

Solution

1. Step 1: Understand attribute selector syntax

   To select elements by attribute, use square brackets with attribute and value: [attr='value'].

2. Step 2: Match the selector to the input element

   input[name='username'] selects input elements with name="username" exactly.

3. Final Answer:

   input[name='username'] -> Option A

4. Quick Check:

   Attribute selector uses [attr='value'] = input[name='username'] [OK]

Hint: Use [attr='value'] to select by attribute [OK]

Common Mistakes:

• Missing quotes around attribute value
• Using # for attribute instead of []
• Incorrect syntax like input.class='input-field'

4. Identify the error in this CSS selector used in Selenium:
driver.findElement(By.cssSelector("div#main .content > p:first-child"));
What is wrong with this selector?

medium

A. The pseudo-class ':first-child' is not supported in CSS selectors.

B. The space between 'div#main' and '.content' is incorrect.

C. The '>' combinator cannot be used with classes.

D. The selector syntax is correct and will work as expected.

Solution

1. Step 1: Analyze the selector components

   The selector targets a p element that is the first child inside an element with class content, which is inside a div with id main.

2. Step 2: Check CSS selector validity in Selenium

   All parts including #main, .content, child combinator >, and pseudo-class :first-child are valid CSS selectors supported by Selenium.

3. Final Answer:

   The selector syntax is correct and will work as expected. -> Option D

4. Quick Check:

   Valid CSS selector syntax = correct [OK]

Hint: Check if selector uses valid CSS syntax supported by Selenium [OK]

Common Mistakes:

• Assuming pseudo-classes like :first-child are unsupported
• Misunderstanding combinator usage
• Thinking spaces between selectors are always wrong

5. You want to select all button elements that have both the class btn and an attribute data-action equal to save. Which CSS selector is correct?

hard

A. button#btn[data-action=save]

B. button.btn[data-action='save']

C. button .btn[data-action='save']

D. button.btn[data-action=save]

Solution

1. Step 1: Combine class and attribute selectors correctly

   To select elements with a class and attribute, chain selectors without spaces: button.btn[data-action='save'].

2. Step 2: Verify syntax details

   Quotes around attribute value are recommended for exact matching; no spaces between element, class, and attribute selectors.

3. Final Answer:

   button.btn[data-action='save'] -> Option B

4. Quick Check:

   Combine selectors without spaces = button.btn[data-action='save'] [OK]

Hint: Chain selectors without spaces; quote attribute values [OK]

Common Mistakes:

• Using spaces between element and class selectors
• Omitting quotes around attribute values
• Using # instead of . for class