title: :checked css not working
body: <p>I have a product listing little square thing, when I click it ( it's a label ) it should tick the box and it does but it should make the border green and hold it but it doesn't I have this:</p>
  
  <pre><code>.product {
  width: 100%;
  background: #fff;
  border: 4px solid #fff;
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 2px 3px #ddd;
  text-align:center;
  padding-bottom: 15px;
  cursor: pointer;
  
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
  
  a {
      color: #d6d6d6;
      line-height: 25px;
      border-radius: 100%;
      background: #f2f2f2;
      width: 25px;
      height: 25px;
      display: block;
      position: absolute;
      margin: 10px;
  
      -webkit-transition: all .3s ease;
      -moz-transition: all .3s ease;
      -o-transition: all .3s ease;
      -ms-transition: all .3s ease;
      transition: all .3s ease;
  
      &amp;:hover {
          background: #e2e1e1;
          color: #333;
          text-decoration: none
      }
  }
  
  img {
      width: 80%;
      margin: 15px auto;
      pointer-events: none;
  }
  
  span {
      display: block;
  
      &amp;.brand {
          color: #cdcfd2;
          font-size: 13px;
          font-weight: 300;
      }
  
      &amp;.name {
          color: #232f3e;
          font-size: 16px;
          font-weight: 600;
      }
  }
  
  &amp;:hover {
      border: 4px solid #d9dce1;
      box-shadow: none;
  }
  </code></pre>
  
  <p>}</p>
  
  <p>and this works great it's .less my html looks like this: </p>
  
  <pre><code>&lt;div class="col-md-2"&gt;
  &lt;label for="product_id" name="product_id" class="product"&gt;
      &lt;a href="#" title="product"&gt;i&lt;/a&gt;
      &lt;div class="position"&gt;
          &lt;input type="checkbox" class="checkbox" name="product_id" id="product_id"&gt;
      &lt;/div&gt;
      &lt;img src="assets/images/products/image.jpg"&gt;
      &lt;span class="brand"&gt;Brand&lt;/span&gt;
      &lt;span class="name"&gt;Product&lt;/span&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p></p>
  
  <p>How do I would I apply the suggestions in this <a href="https://css-tricks.com/almanac/selectors/c/checked/" rel="nofollow noreferrer"><code>checked:</code></a> example?</p>
  
  <pre><code>input[type=checkbox]:checked + label { }
  </code></pre>
  
  <p>It looks pretty simple but when I add it it doesn't work all I want is the .product border to be green instead of grey when it's selected</p>
  
  <p>I know I can use js but I don't want to css should do it. </p>