Иногда бывает нужно установить правила не для каждого элемента определенного класса, а, допустим, для каждого четвертого. Для этого случая у нашего любимого css есть замечательный псевдо класс nth-child. Далее подробнее…
Допустим, у нас имеется список с классом fourth
<html> <head> <title>Выборка каждого четвертого элемента</title> </head> <body> <ul class=“fouth”> <li>1 Элемент </li> <li>2 Элемент </li> <li>3 Элемент </li> <li>4 Элемент </li> <li>5 Элемент </li> <li>6 Элемент </li> <li>7 Элемент </li> <li>8 Элемент </li> </ul> </body> </html>
Нам нужно выбрать каждый четвертый элемент списка и установить для него цвет шрифта: красный. Для данного класса, в файле стилей, прописываем следующее:
.fouth li:nth-child(4n+4) {
color: #f00;
}
Опишем работу формулы: 4n+4. Почему выбирается именно каждый четвертый элемент? Все очень просто: в переменную n подставляются целые числа, начиная с 0.
4*0+4=4
4*1+4=8
4*2+4=12
и т.д.
Также можем выбрать каждый десятый элемент: nth-child(10n+10)
Или, допустим, каждый третий, начиная со второго: nth-child(3n+2)
Или три последних элемента: nth-last-child(-n+3)
Каждый нечетный выбираем так: nth-child(odd)
Каждый четный выбираем так: nth-child(even)
Надеюсь, данный псевдо класс откроет для вас кучу новых возможностей. Успехов…
