CSS tip: как избавиться от :last-child и упростить отступы Когда… — Frontend разработчик

Frontend разработчик@frontend_1 · 10.5K subscribers Open in TelegramOpen

🎯 CSS tip: как избавиться от :last-child и упростить отступы

Когда нужно задать отступ между элементами, но не последнему, часто пишут:


.item:not(:last-child) {
  margin-bottom: 16px;
}

Но есть современный способ без селекторов и костылей 👇

✅ Используй gap с flex или grid:


.container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

📌 Преимущества:
– Нет нужды в :last-child
– Чище HTML и CSS
– Работает одинаково в любом направлении (row, column)
– Поддерживается во всех современных браузерах

Итог: если ты всё ещё пишешь :not(:last-child) — пришло время обновить подход.

📲 Мы в MAX

👉 @frontend_1

t.me/frontend_1/4307 Translate