CSS :last-child — остання дитина свого батька
CSS-селектор :last-child обирає елемент, який стоїть ОСТАННІМ серед дітей свого батька.
Загальний опис
автор: NagarD
Синтаксис
last-child {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3.1 | 9.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Червоним стає абзац, який є останньою дитиною свого батька. Якби після нього стояв будь-який інший елемент — правило б не спрацювало.
HTML
<div>
<p>Перший абзац.</p>
<p>Останній абзац у div — червоний.</p>
</div>CSS
p:last-child {
background: #ff0000;
}Роздільники між пунктами й кома між тегами: обидва зайві після останнього елемента.
HTML
<ul class="list">
<li>Перший</li>
<li>Другий</li>
<li>Третій</li>
</ul>
<p class="tags"><span>css</span><span>html</span><span>js</span></p>CSS
body { font: 16px/1.5 system-ui, sans-serif; }
.list {
list-style: none;
padding: 0;
max-width: 16rem;
}
.list li {
padding: .5rem 0;
border-bottom: 1px solid #cbd5e1;
}
/* в останнього лінія зайва */
.list li:last-child {
border-bottom: 0;
}
.tags span::after {
content: ", ";
}
/* після останнього теґа коми бути не має */
.tags span:last-child::after {
content: "";
}Коментарі
Коментарів ще немає — будьте першим!