Выбрать Последний Вложенный Элемент

Как выбрать последний has-errors div ниже?

<section class="form-block">
    <div class="form-group has-errors">
          ERROR!
    </div>
    <div class="form-group has-errors">
          ERROR!
    </div>
    <div class="form-group">
          stuff
    </div>
</section>

Я могу выбрать первый has-errors, используя: 

.form-block .form-group.has-errors:first-child {
  background-color: blue;
}

Но last-child не работает выше. Как выбрать последний экземпляр .form-group.has-errors?

Jsfiddle

2 3
html css children

2 ответа:

С CSS это будет сложно, если нет каких - то особых правил-например, это всегда 2-е из последних. Короче говоря, то, о чем вы просите, похоже на last-of-class, которого не существует. Есть last-of-type , но это относится только к типу элемента (div, p, и т.д.), а не к классам.

Следующий лучший вариант-это ванильный JS, чтобы захватить последний элемент с классом .form-group.has-error.

const hasErrors = document.querySelectorAll('.form-group.has-errors');
hasErrors[hasErrors.length -1].style.color = 'red';
<section class="form-block">
    <div class="form-group has-errors">
          ERROR!
    </div>
    <div class="form-group has-errors">
          ERROR!
    </div>
    <div class="form-group">
          stuff
    </div>
</section>

Чтобы сделать это полезным для нескольких блоков формы на странице, его можно изменить кому: 

const formGroups = Array.from(document.querySelectorAll('.form-block'));


formGroups.forEach(function(block) {
  const hasErrors = block.querySelectorAll('.form-group.has-errors');
  hasErrors[hasErrors.length -1].style.color = 'red';
});
Form Block 1
<section class="form-block">
    <div class="form-group has-errors">
          ERROR!
    </div>
    <div class="form-group has-errors">
          ERROR!
    </div>
    <div class="form-group">
          stuff
    </div>
</section>

Form Block 2
<section class="form-block">
    <div class="form-group has-errors">
          ERROR!
    </div>
    <div class="form-group has-errors">
          ERROR!
    </div>
    <div class="form-group">
          stuff
    </div>
</section>
2

Выбор последнего родственного брата, имеющего класс, не достижим с помощью только CSS. У вас есть только:

  • :last-child - последний ребенок своего родителя
  • :last-of-type - последний элемент этого типа в его родителе
  • не первый : selector ~ selector

Поскольку у вас есть .form-group, я предполагаю, что вы используете Bootstrap, поэтому вы используете jQuery. Это сделает трюк: 

$('section').each(function(){
  $('.has-errors', $(this)).last().css({borderBottom: '1px solid red'})
})
0