Определить margin-bottom для input

Question

Как написать в стилях, чтобы всегда для последнего form__input был margin-bottom: 17px, а для остальных 32px

<div class="form__group">
  <label for="" class="form__label">Email</label>
  <input class="form__input form__input_bottom-32" name="email" type="email">
</div>

<div class="form__group">
  <label for="" class="form__label">Пароль</label>
  <input class="form__input" name="pass" type="password">
</div>

<div class="form__group">
  <input class="form__checkbox" name="pass" type="checkbox">
  <label for="" class="form__label">Я согласен получать обновления на почту</label>
</div>

Answer 1

можно использовать :last-of-type, но для div у меня это не срабатывало

можно еще завернуть все div в общий div использовать :last-child

.block {
  border: 1px solid black;
}

p {
  margin-bottom: 14px;
}

p:last-of-type {
  background: red;
  margin-bottom: 20px;
}

<div class = 'block'>
<p class="form__group">
        <label for="" class="form__label">Email</label>
        <input class="form__input form__input_bottom-32" name="email" type="email"> 
    </p>

    <p class="form__group">
        <label for="" class="form__label">Пароль</label>
        <input class="form__input" name="pass" type="password"> 
    </p>

    <p class="form__group">
        <input class="form__checkbox" name="pass" type="checkbox"> 
        <label for="" class="form__label">Я согласен получать обновления на почту</label>
    </p>
</div>

второй вариант

.block {
  border: 1px solid black;
}

.form__group {
    margin-bottom: 14px;
}

div:last-child.form__group {
    background: red;
    margin-bottom: 40px;    
}

 <div class = 'block'>
    <div class="form__group">
        <label for="" class="form__label">Email</label>
        <input class="form__input form__input_bottom-32" name="email" type="email"> 
    </div>

    <div class="form__group">
        <label for="" class="form__label">Пароль</label>
        <input class="form__input" name="pass" type="password"> 
    </div>

    <div class="form__group">
        <input class="form__checkbox" name="pass" type="checkbox"> 
        <label for="" class="form__label">Я согласен получать обновления на почту</label>
    </div>
</div>

БЛОГ НА HUSL

Определить margin-bottom для input

Ответы (1 шт):