Css selector "not:nth child" not working in the template using vailla css styles

Question

Need to margnin-top all labels except the first one in the row, using not:nth child. Having issue with the selector probably**

// template:
<div class="form-group">
  <label class="label">
</div>
<div class="form-group">
  <label class="label">  // need to margin only this label - not the first one
</div>

//styles

.form-group:not(:nth-child(1)) + .label {
  margin-top: 20px;
}

Answer 1

Correct your html. Remove adjacent sibling and add display:inline-block to label (by default it is inline-element)

div.form-group:not(:nth-child(1))  .label {
  margin-top: 20px;
  display:inline-block;
  border:1px solid red;
}

<div class="form-group">
  <label class="label">
  a
  </label>
</div>
<div class="form-group">
  <label class="label">  
  // need to margin only this label - not the first one
  </label>
</div>