Псевдокласс last-child
Сегодня мы изучим еще один псевдокласс, который был добавлен в CSS3, а называется он last-child. При его помощи мы можем задавать стили для последнего дочернего элемента у его родителя. Т.е., если взять пример когда я Вам показывал как можно реализовать меню, то мы добавляли отдельный класс для последнего элемента в списке, для того чтобы убрать рамку снизу. Теперь такую возможность нам предоставляет псевдокласс last-child. Это лишь единственный пример его применения, однако, число применений этого псевдокласса множество. И один из них мы с Вами разберем прямо сейчас.
<html>
<head>
<title>Псевдокласс last-child</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div>
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Применен псевдокласс last-child</a>
</div>
</body>
</html>
Задаем стили:
a {
color: #00f;
display: block;
}
div a:last-child {
color: #abcabc;
}
Получаем вот такой результат:
Мы создали блок и поместили в него три ссылки. Перед нами стал вопрос, каким образом можно изменить цвет последней ссылки? Способов решения этой задачи много, но мы рассмотрим всего два. Мы можем задать для нужной ссылки отдельный класс, в дальнейшем к которому можно обратиться и изменить цвет этой ссылки. Но встает другой вопрос, а если у нас на странице находится множество ссылок, и у каждого блока ссылок нужно изменить цвет последней ссылки? Здесь к нам на помощь приходит псевдокласс last-child, благодаря которому, с помощью буквально одной строки css кода, можно изменить цвет всех последних ссылок. Согласитесь, что это гораздо проще, чем проставлять каждой ссылке отдельный класс. Думаю, что Вы усвоили всю пользу этого псевдокласса и в нужный момент не только вспомните о нем, но и сможете применить в вашей задаче.
