Abe Fehr Abe Fehr - 4 months ago 8
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>
...
</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.

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

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.

Comments