Псевдокласс :nth-child
Псевдокласс :nth-child позволяет сделать выбор элемента по его номеру в дереве элементов. Отсчет элементов идет с начала, нумерация элементов начинается с единицы. Так же есть возможность выбора нескольких элементов используя определенные значения или функциональную запись.
ul li:nth-child(...) {
...
}
Значения
:nth-child(odd)
Выбор всех нечетных элементов
<style>
ul.odd li:nth-child(odd) {
color: red;
}
</style>
<ul class="odd">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
<li>Четвертый элемент</li>
</ul>- Первый элемент
- Второй элемент
- Третий элемент
- Четвертый элемент
:nth-child(even)
Выбор всех четных элементов
<style>
ul.even li:nth-child(even) {
color: red;
}
</style>
<ul class="even">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
<li>Четвертый элемент</li>
</ul>- Первый элемент
- Второй элемент
- Третий элемент
- Четвертый элемент
:nth-child(3)
Выбор элемента по его порядковому номеру относительно своего родителя
<style>
ul.num li:nth-child(3) {
color: red;
}
</style>
<ul class="num">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
<li>Четвертый элемент</li>
</ul>- Первый элемент
- Второй элемент
- Третий элемент
- Четвертый элемент
:nth-child(3n+2)
Выбор элементов используя математическое выражение an+b, где a - множитель счетчика, n - счетчик, b - изменение начала работы счетчика.
В примере :nth-child(3n+2), отсчет начнется со второго дочернего элемента списка, потому что b = 2, и дальше будет стилизоваться каждый третий элемент начиная со второго, так как an = 3n.
<style>
ul.count li:nth-child(3n+2) {
color: red;
}
</style>
<ul class="count">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
<li>Четвертый элемент</li>
<li>Пятый элемент</li>
<li>Шестой элемент</li>
<li>Седьмой элемент</li>
<li>Восьмой элемент</li>
</ul>- Первый элемент
- Второй элемент
- Третий элемент
- Четвертый элемент
- Пятый элемент
- Шестой элемент
- Седьмой элемент
- Восьмой элемент
:nth-child(-n+2)
Если необходимо выбрать определенное количество элементов, используйте конструкцию -n+b, где b = количество необходимых элементов для выборки.
<style>
ul.minusn li:nth-child(-n+2) {
color: red;
}
</style>
<ul class="minusn">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
<li>Четвертый элемент</li>
<li>Пятый элемент</li>
</ul>- Первый элемент
- Второй элемент
- Третий элемент
- Четвертый элемент
- Пятый элемент