CSS - All elements in parent match last-child selector. How can I add styling to all the elements contained in a form but the last one?

Question

I am trying to add a bottom border to all but the last direct children of a form by using the following styling block:

But all the children of the form seem to match the :last-child selector.

Here is my code:

  .form-for:not(:last-child) > div { border-bottom: 1px solid #6d6e71; } 

 <form class="form-for"> <div> <div class="form-group"> <label class="form-for-label">Name</label> <input type="text" name="Name" value="" placeholder="Name"> </div> </div> <div> <div class="form-group"> <label class="form-for-label">Description</label> <input type="text" name="Description" value="" placeholder="Description"> </div> </div> <div> <div class="form-group"> <label class="form-for-label">Creation Date</label> <input type="text" name="Creation Date" value="" placeholder="Creation Date"> </div> </div> </form> 

It might be important to mention that this form is dynamically generated using the react-form-for-object library .

Answer 1

try this :)

.form-for > div:not(:last-child) {
    border-bottom: 1px solid #6d6e71;
}

another solution (optional)

.form-for > div {
    border-bottom: 1px solid #6d6e71;
}
.form-for > div:last-child {
    border-bottom: 0px solid #fff;
}

Answer 2

If you only want to select direct children you can use parent > child :

 .form-for>div:not(:last-of-type)>div { border-bottom: 1px solid #6d6e71; } 

 <form class="form-for"> <div> <div class="form-group"> <label class="form-for-label">Name</label> <input type="text" name="Name" value="" placeholder="Name"> </div> </div> <div> <div class="form-group"> <label class="form-for-label">Description</label> <input type="text" name="Description" value="" placeholder="Description"> </div> </div> <div> <div class="form-group"> <label class="form-for-label">Creation Date</label> <input type="text" name="Creation Date" value="" placeholder="Creation Date"> </div> </div> <input type="submit" /> </form>