CSS селектор для последнего элемента с классом внутри элемента с классом - PullRequest
Новая
       45

CSS селектор для последнего элемента с классом внутри элемента с классом

1 голос
/ 20 сентября 2019

Я использую загрузчик, и я поместил свои входные данные в их собственные .form-group.Все мои входные данные также содержатся в элементе div с классом .well.

Я хочу удалить значение по умолчанию margin-bottom:15px, которое Bootstrap имеет для .form-group, но только если его последний экземпляр .form-group в пределахего родитель .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>

Поэтому я хочу удалить margin-bottom равным 0px в последнем form-group в каждом из элементов с классом well.

Я попробовал приведенный ниже код, но он просто применил стиль ко всем .form-группам 

.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>

Ответы [ 4 ]

1 голос
/ 20 сентября 2019

Селектор CSS, который я пробовал, на самом деле работает.HTML создается с использованием некоторых методов расширения C #, и я не осознавал, что все входные данные были заключены в .form-group div.Селектор CSS видел бы это как last-of-type для .well.Как только я удалил этот div, селектор сработал. 

.well .form-group:last-of-type {
    margin-bottom: 0!important;
}
1 голос
/ 20 сентября 2019

Решением было бы использовать загрузчик для этого.mb-0 - это служебный класс начальной загрузки, который устанавливает margin-bottom в 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>

Подробнее о mb-0: Что такое class = «mb-0» в Bootstrap 4?

0 голосов
/ 20 сентября 2019

Вы можете использовать > для указания следующего потомка .well типа div

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

0 голосов
/ 20 сентября 2019

Если вы не хотите добавлять класс, вы также можете сделать это напрямую с помощью селектора :last-child. 

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

}
...