CODEWITHSUNDEEP
csscss-selectors
RasMason
RasMason

Reputation: 2212

nth-child first-child not working

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

Answers (1)

Sirko
Sirko

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

Related Questions