Styling checkbox if following other checkbox

Question

The following code seems to have no effect in Firefox:

input[type="checkbox"] + input[type="checkbox"] {
    margin-top: 12px;
    }

While this works:

input[type="checkbox"] {
    margin-top: 12px;
    }

Why?

---

HTML

<div>
    <input type="checkbox" name="somename[]" id="somename" value="1"> One<br>
    <input type="checkbox" name="somename[]" value="2"> Two<br>
    <input type="checkbox" name="somename[]" value="3"> Three<br>
    ...
</div>

Answer 1

In this case, the <br> tag is the adjacent sibling. You'll need to use the general sibling selector, ~, to select the sibling <input>.

input[type="checkbox"] ~ input[type="checkbox"] {
  margin-top: 12px;
}

Answer 2

It is because the + selector applies to an adjacent sibling. In your case that are the <br> tags so there are no adjacent checkboxes..

This works with the interjacent <br> tags:

input[type="checkbox"] + br + input[type="checkbox"] {
    margin-top: 12px;
}

or use the ~ selector:

input[type="checkbox"] ~ input[type="checkbox"] {
    margin-top: 12px;
}