Reputation: 2212
trying to get the nth-child/first-child working
on the first label within the form below
but can't get it right
At the moment I'm using
form label {
display: block;
font-size: 20px;
font-size: 2rem;
line-height: 18px;
cursor: pointer;
margin:0 auto;
color:#FFF;
text-transform:uppercase;
padding:40px 0 10px;
font-weight: normal!important;
}
label:first-child {
padding-top:0;
}
but have used
form code div.field span.lspan label:nth-of-type(1)
form code div.field span.lspan label:first-child
.lspan label:first-child
form label:first-child
they set all labels in the form to padding 0
<form method="POST" action="" class="">
<div class="field">
<span class="lspan"><label for="sender_name">Name</label></span>
<span class="inspan"><input class="hinput" type="text" name="sender_name" value=""></span>
</div>
<div class="field">
<span class="lspan"><label for="sender_name">Email</label></span><span class="inspan"> <input class="hinput" type="text" name="email" value=""> </span></div>
<div class="field">
<span class="lspan"><label for="subject">Subject</label></span><span class="inspan"><input class="hinput" type="text" name="subject" value=""></span></div>
<div class="field">
<span class="lspan"><label for="sender_name">Message</label></span><span class="inspan"> <textarea class="htextarea" name="message"></textarea></span></div>
<div class="field">
</div>
<div class="field" style="margin-top:15px">
<input type = "submit" class="csubmit" name = "submit" value="Submit" style="" />
</div>
</form>
Thanks
Roy
Upvotes: 0
Views: 2505
Reputation: 74106
All the <label>
tags in your code are a first-child
of their respective <span>
element.
If you only want to target the first appearance of a <label>
in your code use this:
form div:first-child label {
padding: 0;
}
This will target any label within the <div>
element, that is the first-child
of the form.
Remember, that you can use :first-child
on any subselektor and not just on the outermost right!
Upvotes: 1