Привет. Сегодня я напишу совсем коротенькую статью о том, как с помощью css-псевдокласса nth-child можно выбрать каждый третий элемент. Хотя на самом деле можно выбирать хоть каждый второй, хоть каждый сто пятьдесят шестой. Разницы ноль.
Демонстрация
В разметке я быстро разместил 9 пустых div-ов. В таблице стилей я задал им следующие свойства
div{
width: 50px;
margin: 10px;
height: 50px;
background: #fff;
border: 2px solid #000;
display: inline-block
}
Все блоки белые с черной рамкой. А теперь представьте такую задачу – вам нужно сделать так, чтобы каждый третий блок окрасился в красный цвет. Как это сделать. Можно привязать к третьему, шестому и девятому блоку стилевой класс и там прописать нужное свойство. Но это не очень удобно – а вдруг блоков будет сто, и каждый третий нужно сделать красным. Нет уж, для этого есть кое-что поудобнее.
Псевдокласс nth-child – вот что нам поможет.
div:nth-child(3n){
background: red
}
Данная запись ясно показывает, что красным будет выделен каждый третий div. Вставьте код в таблицу стилей и проверьте. Действительно, так и есть!
Как вы понимаете, вместо 3n можно прописать 2n, 7n и даже 69n. В последнем случае каждый шестьдесят девятый элемент станет красным. В итоге наших экспериментов окрасились третий, шестой и девятый блок. А что, если вам нужно, к примеру, так: 1, 4, 7 и так далее. Это реализовать тоже просто! Достаточно дописать так:
div:nth-child(3n+1). И получите нужный результат. Если напишите (3n+2), то будут выбраны блоки 2, 5, 8 и т.д.