LESS hide first element with class in DIV

Question

I'm currently trying to hide a button using LESS. My HTML looks the following way:

<div class="targets">
   <div class="target">
      <div class="form-group">
         <div class="col-md-12">
            <button type="button" class="btn-delete" />
         </div>
      </div>
   </div>
</div>

The problem: I use jQuery to add a "target" div to "targets" div, the html looks like this after the DOM manipulation:

<div class="targets">
   <div class="target">
      <div class="form-group">
         <div class="col-md-12">
            <button type="button" class="btn-delete" />
         </div>
      </div>
   </div>
   <div class="target">
      <div class="form-group">
         <div class="col-md-12">
            <button type="button" class="btn-delete" />
         </div>
      </div>
   </div>
   <div class="target">
      <div class="form-group">
         <div class="col-md-12">
            <button type="button" class="btn-delete" />
         </div>
      </div>
   </div>
</div>

I always want to hide the first button with the class btn-delete. I use LESS.

My current LESS looks like this:

.targets {
    button[type="button"] {
        .btn-delete {
            visibility: hidden;
        }
    }
}

Unfortunately my LESS coding doesn't work as I expected.

Do you know how to solve this issue, thus to always hide the first .btn-delete button with LESS Css?

Thanks! :)

Answer 1

As you are targeting the button with btn-delete class, You need & operator

.targets {
    button[type="button"] {
        &.btn-delete {
            visibility: hidden;
        }
    }
}

OR , Traditional way

.targets {
    button[type="button"].btn-delete {
            visibility: hidden;
    }
}

Answer 2

Its applying the visibility to a element with a class inside the button so

.targets {
  button[type="button"].btn-delete {
    visibility: hidden;
  }
}

Would look for button[type="button"] with the class .btn-delete.

Answer 3

Hello use below code it work properly

.targets{
    .target:first-child{  
       button[type="button"] {
        &.btn-delete{ 
          visibility: hidden;
        }
      }
   }
}