css стили для любого последнего дочернего элемента родителя

Question

.column:last-child не работает, т. к. перед элементами этого класса есть элементы иного класса:

<div class="wrapper">
    <div class="row"></div>
    <div class="column"></div>
    <div class="column"></div> <!-- margin-bottom: 0; -->
</div>

Как реализовать средствами CSS?

Answer 1

Используйте :last-of-type

.column:last-of-type {
  border: 1px solid red;
}

<div class="wrapper">
    <div class="row">1</div>
    <div class="column">2</div>
    <div class="column">3</div> <!-- margin-bottom: 0; -->
</div>

Answer 2

ну вообще-то всё прекрасно работает, но на всякий докинул альтернатив

.wrapper>* {
  border: 3px solid black;
  background: lightgray;
  font-size: 50px;
}

.column:last-of-type {
  border: 3px solid red;
}

.column:last-child {
  background: pink;
}

.column:nth-last-child(1) {
  color: darkviolet;
}

<div class="wrapper">
  <div class="row">1</div>
  <div class="column">2</div>
  <div class="column">3</div><!-- margin-bottom: 0; -->
</div>

проверяйте свои стили с вёрсткой.

по хорошему их стоило в более полном виде добавить с самого начала. без них у присутствующих определенно нет возможности делать что-то кроме как угадывать что у вас там произошло:

может браузер чудит
может не все теги указаны
может какой то селектор банально перевешивает.
может просто звёзды не сошлись :3

БЛОГ НА HUSL

css стили для любого последнего дочернего элемента родителя

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