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