Характеристики свойства
В каких браузерах работает?
9.0+ | 1.0+ | 9.6+ | 3.0+ | 3.5+ | 2.1 | 2.0 |
В каких версиях CSS используется?
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
- | - | - | + |
Для чего используется?
Этим псевдоклассом определяется особенности стиля, который будет применен к последнему дочернему элементу в пределах определенного родителя. По своим функциям этот псевдокласс очень похож с :last-child.
Как правильно задавать?
селектор:last-of-type { … }
Какие могут быть значения?
Нет.
Пример использования
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>last-of-type</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-of-type { 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 свойства:
Псевдоклассы