CSS Selector and HTML

Question

Below is my CSS and HTML code.

Given CSS selector is not applied when there is a hidden field between INPUT and SPAN tags

CSS

input[type="checkbox"] + .lbl:before {
    background-color: #FAFAFA;
    border: 1px solid #CCCCCC;
}

CSS Working

<label>
<input name="SMS" type="checkbox" />
<span class="lbl"> choice 2</span>
</label>

CSS Not Applied

<label>
<input name="SMS" type="checkbox" />
<input type="hidden" value="false" name="SMS">
<span class="lbl"> choice 2</span>
</label>

How can I change/add new CSS selector change to support both cases?

Note: The Hidden field was automatically generated by ASP.Net MVC framework and we dont have a control to place it in other place

Answer 1

The + indicates that the element is placed immediately after the checkbox.

You could change it to > which indicates a parent.

input[type="checkbox"] > .lbl:before {
    background-color: #FAFAFA;
    border: 1px solid #CCCCCC;
}

http://jsfiddle.net/TkamX/

Note: I have added a new div and used that as the parent element.

div > .lbl {
    background-color: #FAFAFA;
    border: 1px solid #CCCCCC;
}

You can also use a single selector by giving your span an ID and then select based on that.

Answer 2

You can use the general sibling combinator ~ if you're trying to style a sibling that is not necessarily immediately following another element.

So in your case

input[type="checkbox"] ~ .lbl:before {
    background-color: #FAFAFA;
    border: 1px solid #CCCCCC;
}

Would work in both scenarios

http://jsfiddle.net/Hx8ZG/