Abe Fehr Abe Fehr - 1 year ago 59
CSS Question

Create CSS selector for nested element with more than one attribute

I'm trying to select a checkbox that's nested in a div of a page, for acceptance testing purposes.

Here's an example of the DOM structure I might see:

<div class="section-1">
<input type="checkbox" name="type[12312][][]" value="1">Thing1</input>
<input type="checkbox" name="type[12312][][]" value="2">Thing2</input>

Normally, I could do something like this to select a particular checkbox:


But in my case, I need the checkbox in a particular section, of which there are many in the page. So I assumed the following would work:

.section-1 input[name*=type][value=1]

but it does not.

My questions are:

  1. Why doesn't it work?

  2. How can I select the input now?

Note: I could use JS to get the input, but I would really prefer to use CSS selectors so I can use the library(Selenium)'s functions to handle element manipulation.

Summary: It was the missing quotes around the values of the attributes that caused this to fail. According to the spec, attribute values can either be identifiers or strings. I see now that an identifier can contain letters and numbers, but must not begin with a number. This is why it failed.

Answer Source

This works:

.section-1 input[name^="type"][value="2"] {
    display: block;
    margin: 25px;
<div class="section-1">
    <input type="checkbox" name="type[12312][][]" value="1">
    <input type="checkbox" name="type[12312][][]" value="2">

Try adding quotation marks to your attribute values.

Also, the input element is a void element. It does not have a closing tag and does not accept content.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download