Выбор каждого четвертого элемента css

Иногда бывает нужно установить правила не для каждого элемента определенного класса, а, допустим, для каждого четвертого. Для этого случая у нашего любимого 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)

Надеюсь, данный псевдо класс откроет для вас кучу новых возможностей. Успехов…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>