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