How to select first label within div using css?

Question

Hi i want to select first label element within div with classname form_fields.

Below is the code,

 <form>
     <div className="form_fields">
         <span>first span</span>
         <div>first div</div>
         <label>
             <span>Name</span>
         </label>
         <label>Description</label>
     </div></form>

What i have tried?

.fields label:first-child {
    margin: 20px;
}

But this doesnt apply to the first label inside div of class form_fields. How can i do it? thanks.

Answer 1

Try with first-of-type pseudo-selector:

.form_fields label:first-of-type {
    margin: 20px;
}

Answer 2

.form_fields label:nth-of-type(1) {
    margin: 20px;
}