title: LESS hide first element with class in DIV
body: <p>I'm currently trying to hide a button using LESS. My HTML looks the following way:</p>
  
  <pre><code>&lt;div class="targets"&gt;
     &lt;div class="target"&gt;
        &lt;div class="form-group"&gt;
           &lt;div class="col-md-12"&gt;
              &lt;button type="button" class="btn-delete" /&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem: I use jQuery to add a "target" div to "targets" div, the html looks like this after the DOM manipulation:</p>
  
  <pre><code>&lt;div class="targets"&gt;
     &lt;div class="target"&gt;
        &lt;div class="form-group"&gt;
           &lt;div class="col-md-12"&gt;
              &lt;button type="button" class="btn-delete" /&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="target"&gt;
        &lt;div class="form-group"&gt;
           &lt;div class="col-md-12"&gt;
              &lt;button type="button" class="btn-delete" /&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="target"&gt;
        &lt;div class="form-group"&gt;
           &lt;div class="col-md-12"&gt;
              &lt;button type="button" class="btn-delete" /&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I always want to <strong>hide the first button</strong> with the class btn-delete. I use LESS.</p>
  
  <p>My current LESS looks like this:</p>
  
  <pre><code>.targets {
      button[type="button"] {
          .btn-delete {
              visibility: hidden;
          }
      }
  }
  </code></pre>
  
  <p>Unfortunately my LESS coding doesn't work as I expected.</p>
  
  <p>Do you know how to solve this issue, thus to always hide the first .btn-delete button with LESS Css?</p>
  
  <p>Thanks! :)</p>