Коли створюємо список навігації, часто додаємо нижній бордер кожному пункту, щоб розділити елементи:
li {
border-bottom: 1px solid #e2e2e2;
}
Але останньому елементу бордер не потрібен, тож зазвичай додаємо:
li:last-child {
border-bottom: none;
}
Альтернатива: коротше та чистіше
Замість двох правил можна обійтись одним — через :not(:last-child):
li:not(:last-child) {
border-bottom: 1px solid #e2e2e2;
}
Це:
- легше підтримувати;
- виключає ризик дублювання стилів;
- краще масштабується в компонентах або UI-бібліотеках.
➕ Ще один варіант — через сусідній селектор:
li + li {
border-top: 1px solid #e2e2e2;
}
Він працює трохи інакше:
- бордер додається зверху кожному елементу, крім першого;
- підходить, коли ти хочеш уникнути “злипання” зверху, а не знизу.
Коротко:
:not(:last-child)— зручніший спосіб прибрати бордер у кінці списку.+селектор — альтернатива для бордерів зверху.- Менше коду - менше багів.