How to select first label within div using css? - html

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;
}

Answer 3

I can imagine you are looking to do more than just that but its a great start to ask around here. In HTML and CSS you will find there are several ways to achieve the same results and the path you choose will often be based on personal preferences. In this specific case you have just concept mistakes but you are definitively on the right track.
in your tag, you should change className o just "class".
in your style, change :first-child to :first-of-type
<form>
<div class="form_fields">
<span>first span</span>
<div>first div</div>
<label>
<span>Name</span>
</label>
<label>Description</label>
</div>
</form>
<style>
.form_fields label:first-of-type {
margin: 20px;
}
</style>

Answer 4

You can choose between 2 pseudo-class :
The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements. See doc
The :nth-of-type(1) CSS pseudo-class matches elements of a given type, based on their position among a group of siblings. See doc
Solution with :first-of-type :
.form_fields label:first-of-type {
background:red;
}
<form>
<div class="form_fields">
<span>first span</span>
<div>first div</div>
<label>
<span>Name</span>
</label>
<label>Description</label>
</div>
</form>

Answer 5

.form_fields label:nth-of-type(1) {
color: blue;
}