Could someone assist me in understanding why the first-of-type CSS is not working correctly?
.item:first-of-type .delete{
display: none ;
}
.delete { text-decoration: none; color: red; padding-top: 40px;}
.add_form_field { white-space: nowrap; }<div id="dimensions" class="row item">
<div class="col-sm-3">
<label>Longueur(cm):</label>
<input type="number" min="0" name="longueurs[]" id="length" value="<?php //echo $length;?>" required>
</div>
<div class="col-sm-3">
<label>Largeur(cm):</label>
<input type="number" min="0" name="largeurs[]" id="width" value="<?php //echo $width;?>" required>
</div>
<div class="col-sm-3">
<label>Hauteur(cm):</label>
<input type="number" min="0" name="hauteurs[]" id="height" value="<?php //echo $height;?>" required>
</div>
<div class="col-sm-2">
<label>Poids(Kg):</label>
<input type="text" min="0" name="poids[]" id="weight" value="<?php //echo $weight;?>"required>
</div>
<a href="#" class="delete">Delete</a>
</div>
<div class="col-md-3" style="">
<br>
<button class="add_form_field">Ajouter un colis</button>
</div>Can anyone suggest an alternative way to hide the first delete element? Your help is much appreciated.