Create CSS selector for nested element with more than one attribute

Question

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>
    ...
</div>
...

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

input[name*=type][value=1]

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.

Answer 1

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">
</div>

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.