Характеристики свойства
В каких браузерах работает?
9.0+ | 1.0+ | 9.6+ | 1.0+ | 1.0+ | 1.0 | 2.0 |
В каких версиях CSS используется?
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
- | - | - | + |
Для чего используется?
Этот псевдокласс определяет внешний вид элемента, который является последним дочерним блоком своего родителя. Такая схема очень часто применяется в маркированных списках, которые будут периодически пополнятся.
Как правильно задавать?
селектор:last-child { … }
Какие могут быть значения?
Нет.
Пример использования
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>last-child</title> <style> .menu { background: #4757c8; /*покрасим задний фон*/ display:block; /*присвоим объекту блочные свойства*/ width:380px;/*определим постоянную ширину*/ margin:0px auto;/*установим отступы таким образом, чтобы блок находился в центре экрана*/ } .menu a { color: #fff; /*белим буквы*/ display: inline-block; /*установим строчно-блочные свойства*/ border-right: 1px solid #04148e; /*тонкая линия по периметру контейнера*/ padding: 5px 10px;/*внутренние отступы*/ text-transform:uppercase;/*все буквы заглавные*/ margin-right:-4px;/*корректируем положение блока*/ text-decoration:none;/*никаких подчеркиваний*/ } /*убираем правую границу у последнего элемента*/ .menu a:last-child { border-right: none; } /*изменяем оформление при наведении на объект*/ .menu a:hover { background: #eee; color:#444; } </style> </head> <body> <div class="menu"> <a href="#">Главная</a> <a href="#">Новости</a> <a href="#">Блог</a> <a href="#">Контакты</a> </div> </body> </html>
По итогу получаем
Тип CSS свойства:
Псевдоклассы