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

Darren · Accepted Answer · 2013-06-01 15:31:59Z

3

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.

edited Jun 1, 2013 at 15:31

answered Jun 1, 2013 at 15:24

Darren

71.2k24 gold badges141 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Darren Over a year ago

@Adrift - yes that's why I put it as a div in my example. I was going to state that having a span inside an input is bad practice etc. You can also use other selectors or an ID.

Adrift · Accepted Answer · 2013-06-01 15:48:46Z

1

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/

edited Jun 1, 2013 at 15:48

answered Jun 1, 2013 at 15:39

Adrift

60.1k12 gold badges98 silver badges92 bronze badges

Comments

Spudley · Accepted Answer · 2013-06-01 15:44:53Z

If the only possible issue here is a hidden input field between the checkbox and the span, then you should be able to reference that in your selector:

input[type="checkbox"] + input[type="hidden"] + .lbl:before {
    ....
}

Alternatively, if the hidden field may or may not be there, then you'll need to allow for both options:

input[type="checkbox"] + .lbl:before, input[type="checkbox"] + input[type="hidden"] + .lbl:before {
    ....
}

If there could be more elements between the two, and you don't know what they could be, then you'll need to swap your + selector for a ~ selector, which selects any sibling rather than the adjacent one.

input[type="checkbox"] ~ .lbl:before {
    ....
}

This option might be the simplest, but does have the caveat that it might select things which wouldn't have been selected by your original + selector.

Hope that helps.

Collectives™ on Stack Overflow

CSS Selector and HTML

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related