Псевдокласс nth-child
Сегодня мы с Вами завершим рассмотрение псевдоклассов, которые относятся к разряду child. И последний из них, а также один из самых используемых - псевдокласс nth-child. Лично мне данный псевдокласс очень нравится, я его постоянно использую в практике, а также он очень сокращает время разработки. А теперь разберемся в том, какое действие он выполняет. При его помощи мы можем обращаться к дочерним элементам их родителей по порядку нумерации элементов. Например, у нас имеется список с десятью элементами li. Они являются дочерними по отношению к списку, и чтобы обратиться к седьмому элементу li, достаточно применить изучаемый псевдокласс. Давайте теперь рассмотрим все это на примере.
<html>
<head>
<title>Псевдокласс nth-child</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<ul>
<li>
<a href="#">Первая ссылка</a>
</li>
<li>
<a href="#">Вторая ссылка</a>
</li>
<li>
<a href="#">Третья ссылка</a>
</li>
<li>
<a href="#">Четвертая ссылка</a>
</li>
<li>
<a href="#">Пятая ссылка</a>
</li>
<li>
<a href="#">Шестая ссылка</a>
</li>
<li>
<a href="#">Седьмая ссылка</a>
</li>
<li>
<a href="#">Восьмая ссылка</a>
</li>
<li>
<a href="#">Девятая ссылка</a>
</li>
<li>
<a href="#">Десятая ссылка</a>
</li>
</ul>
</body>
</html>
Применим CSS стили для седьмого элемента li, в котором находится ссылка:
a {
color: #00f;
}
li:nth-child(7) a {
color: #f00;
font-size: 25px;
}
В результате мы получим следующее:
Мы создали список и в его элементы вложили по ссылке. Всем ссылкам был задан синий цвет. А при помощи псевдокласса nth-child мы указали, что нам нужен 7 элемент и мы обращаемся к его ссылке, после чего устанавливаем размер шрифта и другой цвет. Таким образом, возможно, обращаться при помощи нумерации и к другим элементам. Но это не все значения, которые может принимать изучаемый псевдокласс, помимо чисел, может быть применено значение odd, означающее, что будут выбраны все нечетные номера, либо значение even, означает, что выбираются четные элементы. И последнее, мы можем самостоятельно задавать значение, благодаря следующему выражению 2n + 1. Прошу заметить, что числа 2 и 1 это лишь пример, вместо них Вы можете использовать все, что Вам нужно, а переменная n, принимает значение самостоятельно, начиная от нуля и далее, пока условие будет удовлетворительным. Вот мы и разобрали такой замечательный псевдокласс, который нам предоставили разработчики CSS3. Всего Вам наилучшего!
