assign pseudoclass to a label within a specific div - html

Question

I would like to assign a pseudo-css class to a <label> within a div with a a specific #id
My markup:
<div id="square">
<input class="time" id="show_45min" type="checkbox" name="time" value="45min">
<label for="show_45min" class="square">45 min</label><br>
<input class="time" id="show_60min" type="checkbox" name="time" value="60min">
<label for="show_60min" class="square">60 min</label><br>
</div>
and the css:
#square input[type=radio] {
display: none;
}
#square label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
problem is, that still every label on the page gets the content of label:before. But I just want it to assign to the labels within the div.
Thanks

Answer 1

http://jsbin.com/luhib/1/edit
input[id^=show_]{
display:none;
}
label[for^=show_]:before {
content: "";
display: inline-block;
vertical-align:baseline;
width: 1em;
height: 1em;
margin-right: 10px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
input[id^=show_]:checked + label.square:before {
box-shadow: inset 0px 2px 15px 0px rgba(255, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

Answer 2

You may want to use the > direct child selector:
#square > label:before
More from MDN
The > combinator separates two selectors and matches only those
elements matched by the second selector that are direct children of
elements matched by the first. By contrast, when two selectors are
combined with the descendant selector, the combined selector
expression matches those elements matched by the second selector for
which there exists an ancestor element matched by the first selector,
regardless of the number of "hops" up the DOM.

Answer 3

Change this
#square label:before
to
#square > label:before