CSS Selector For Last Element With Class Within Element With Class

Question

I'm using bootstrap and I have placed my inputs within their own .form-group. All my inputs are also contained within a div with a .well class.

I want to remove the default margin-bottom:15px that bootstrap has for .form-group but only if its the last instance of .form-group within its parent .well div.

<div class="well">
<div class="form-group">
    <div class="col-md-6">
        <div class="form-group">
            <label class="m-b-none">Name</label>
            <div class="input-group">
                <input class="form-control" name="Name">
                <div class="input-group-addon"><i class="fa fa-check-circle"></i></div>
            </div>
        </div>
        <div class="form-group">
            <label class="m-b-none">Surname</label>
            <div class="input-group">
                <input class="form-control" name="Surname">
                <div class="input-group-addon"><i class="fa fa-check-circle"></i></div>
            </div>
        </div>
    </div>
</div>

So I want to remove set the margin-bottom to 0px on the last form-group within each of the elements with the class well.

I tried the below code but it just applied the style to all .form-groups

.well .form-group:last-of-type {
    margin-bottom: 0!important;
}

.well .form-group:last-of-type {
    margin-bottom: 0 !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="well">
  <div class="form-group">
    <input/>
  </div>
  <div class="form-group">
    <input/>
  </div>
</div>
<div class="well">
  <div class="form-group">
    <input/>
  </div>
  <div class="form-group">
    <input/>
  </div>
</div>

Im grabbing an exact copy of the code and I think I can see why its not working. All inputs are wrapped in their own form-group so the selector would see that as the last of type. — Bad Dub, Sep 20 '19 at 10:14

score 1 · Answer 1 · answered Sep 20 '19 at 09:56

1

A solution would be to use bootstrap for this. mb-0 is a bootstrap utility class to set the margin-bottom to 0.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well">
   <div class="form-group">
     <input/>
   </div>
   <div class="mb-0 form-group">
     <input/>
   </div>
</div>
<div class="well">
   <div class="form-group">
     <input/>
   </div>
   <div class="mb-0 form-group">
     <input/>
   </div>
</div>

More on mb-0: What is class=“mb-0” in Bootstrap 4?

answered Sep 20 '19 at 09:56

aloisdg

22,270
6
85
105

I know I could have done this but I dont want to go through every input I've added so far and add that class. I want to just use one CSS selector to capture the whole project. – Bad Dub Sep 20 '19 at 09:57
You will face a cascade of problem by doing that. Take the habit of writing functional CSS: https://rangle.io/blog/styling-with-functional-css/ – aloisdg Sep 20 '19 at 09:59

score 1 · Accepted Answer · answered Sep 20 '19 at 10:21

The CSS selector I was trying actually works. The HTML is produced using some C# extension methods and I hadn't realised all the inputs were being wrapped in a .form-group div. The CSS selector would have seen that as the last-of-type for the .well. Once I removed this div the selector worked.

.well .form-group:last-of-type {
    margin-bottom: 0!important;
}

score 0 · Answer 3 · answered Sep 20 '19 at 09:57

0

If you don't want to add a class, You can also do this directly with the :last-child selector.

.well .form-group:last-child {
     margin-bottom: 0!important;

}

answered Sep 20 '19 at 09:57

Jhonny

457
3
7

score 0 · Answer 4 · answered Sep 20 '19 at 10:04

0

You can Use > to specify the next child of .well of type div

.well > div.form-group:last-child { margin-bottom: 0 !important; }

answered Sep 20 '19 at 10:04

manoj

297
2
11

CSS Selector For Last Element With Class Within Element With Class

4 Answers4