assign pseudoclass to a label within a specific div

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);  
}