:first-child and :last-child selector not working in form

Question

<form name="addUserTaskForm" id="addUserTaskForm" class="form-horizontal" action='<c:url value="/task/saveTask"/>' method="POST">

 <input type="hidden" value="${LOGGEDIN_USER.id}" name="user"/>

<div class="form-group required">
  <label class="col-sm-3 control-label">Task</label>
  <div class="col-sm-4">
      <select name="task" id="task" class="form-control">
                    <option value="" selected>Select Task</option>
                        <c:forEach items="${tasks}" var="taskVar">
                            <option value="${taskVar.id}" >${taskVar.lookupValueLabel}</option>
                        </c:forEach>
     </select>

    </div>
     <div id="task_error"></div>
</div>

<div class="form-group">
    <label for="inputEmail3" class="col-sm-3 control-label">Work Item</label>
    <div class="col-sm-4">
      <input type="text" class="form-control" id="ticketId" name="ticketId">

    </div>
     <div id="ticketId_error"></div>
  </div>

<div class="form-group required">
  <label class="col-sm-3 control-label">Time</label>
  <div class="col-sm-1">
      <select name="workedHours" id="workedHours" class="form-control">
                    <option value="" selected>Select</option>
                    <option value="0">0</option>
            <option value="1" >1</option>
            <option value="2" >2</option>
            <option value="3" >3</option>
            <option value="4" >4</option>
            <option value="5" >5</option>
            <option value="6" >6</option>
            <option value="7" >7</option>
            <option value="8" >8</option>
            <option value="9" >9</option>
            <option value="10" >10</option>
            <option value="11" >11</option>
            <option value="12" >12</option>
            <option value="13" >13</option>
            <option value="14" >14</option>
            <option value="15" >15</option>
            <option value="16" >16</option>
            <option value="17" >17</option>
            <option value="18" >18</option>
            <option value="19" >19</option>
            <option value="20" >20</option>
            <option value="21" >21</option>
            <option value="22" >22</option>
            <option value="23" >23</option>
            <option value="24" >24</option>
        </select>

    </div>
    <span class="col-sm-1" id="hours_span">hrs</span>


    <div class="col-sm-1">
     <select name="workedMinutes" id="workedMinutes" class="form-control">
        <option value="" selected>Select</option>
        <option value="">0</option>
        <option value="15" >15</option>
        <option value="30" >30</option>
        <option value="45" >45</option>
    </select>

   </div>
   <span class="col-sm-1" id="minutes_span">mins</span>

<div id="time_error"></div>

</div>

<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Comments</label>
    <div class="col-sm-4">
  <textarea class="form-control" rows="4" cols="50" id="comments" name="comments"></textarea>
  </div>
</div>

<div class="text-center">
<input class="btn btn-primary" type="submit" value="Save" >
<input class="btn btn-primary" type="reset" value="Reset" >
</div>

</form>


#addUserTaskForm .form-group div.col-sm-1{
        width:45%;
    }
    #addUserTaskForm .form-group div.col-sm-1:first-child{
        margin-bottom:5px;
    }
    #addUserTaskForm .form-group div.col-sm-1:last-child{
        margin-left:35%;
    }

Above are my html and corresponding css.

In css, width 45% is getting applied but not the other two rules with :first-child and :last-child selectors. I want first col-sm-1 div to have margin bottom and second col-sm-1 div to have margin-left. Whats the problem? Please help.

you search for the `:matches` (or `:nth-match`) pseudo selector which is planned for CSS4. There is no such thing as `:first-of-class` in css3. `:first-child` ist targeting the actual first element in `.form-group` which is a `` element in your case. — Nico O, Sep 03 '15 at 08:08
possible duplicate of [:first-child not working as expected](http://stackoverflow.com/questions/4505686/first-child-not-working-as-expected) — Nico O, Sep 03 '15 at 08:14
i used first-of-type instead of :first-child and it worked :) thank you Nico — Raksha Bhartiya, Sep 03 '15 at 08:24

score 1 · Accepted Answer · answered Sep 03 '15 at 08:16

The definition of :first-child selector as per MDN is below:

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

However, in your case, the .col-sm-1 divs are not the first or last element of their parent. They are 2nd and 4th child of .form-group respectively. This is why the styles are not being applied to .col-sm-1 in your code.

You can use nth-child property to target the .col-sm-1 elements in CSS as below:

#addUserTaskForm .form-group div.col-sm-1{
    width:45%;
}
#addUserTaskForm .form-group div.col-sm-1:nth-child(2){
    margin-bottom:5px;
}
#addUserTaskForm .form-group div.col-sm-1:nth-child(4){
    margin-left:35%;
}

JSFiddle: https://jsfiddle.net/hchw6Ljm/2/

nth child works but i wanted to make it generalised. Still I used nth-child in place of last-child and first-of-type worked in place of first-child . Thank you sharad :) — Raksha Bhartiya, Sep 03 '15 at 08:26

:first-child and :last-child selector not working in form

1 Answers1