Can I select css parent element?

Question

I'm trying to create product selection by css using checkbox. My codes are here

.vfb-checkbox{
  width:180px;
  height:130px;
 background:url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/2932337756_1845773ed4_q_d_zpsea5idhnt.jpg');
}
/* checkboxes */

.vfb-checkbox label {
    cursor: pointer;
     display: block;
     position: relative;
  width:100%;
  height:100%;

 }
 
.vfb-checkbox label:before {  
     content: "";
      height:100%;
      width:100%;
     position: absolute;  
     left: 0;
 }
.vfb-checkbox label:hover{
  background:rgba(0,0,0,.7) url(http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png)center center no-repeat;
}

 
.vfb-checkbox input[type=checkbox] {  
     display: none;
 }
 
 
   input[type=checkbox]:checked + label:before {  
     background: rgba(0,0,0,.4) url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png') center center no-repeat;  
 }

<div class="vfb-checkbox">  
   
  <label for="check1"> 
    <input id="check1" type="checkbox" name="check" value="check1">
  </label>

</div>

When I click on image it should be checked but its not working. When I set label tag followed by input tag it's working, but I want exact same html structure.

Unbelievably, the duplicate question I've just marked does *not* come up in the list of suggested questions when I try to enter this question's title into the ask page. — BoltClock, Apr 26 '15 at 04:59

score 1 · Accepted Answer · edited Apr 26 '15 at 03:47

1

There is currently no parent selector in CSS.

edited Apr 26 '15 at 03:47

Undo

25,204
37
102
124

answered Apr 26 '15 at 03:23

Arthelon

36
1
5

Is it possible to use javascript? – Amam Dewan Apr 26 '15 at 03:27
This would be really easy to perform using jQuery. Check out the jQuery library and documentation http://api.jquery.com/ – Arthelon Apr 26 '15 at 03:29

Can I select css parent element?

1 Answers1