Nth-child как выбрать каждый третий элемент

Привет. Сегодня я напишу совсем коротенькую статью о том, как с помощью 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. Вставьте код в таблицу стилей и проверьте. Действительно, так и есть!nth-child как выбрать каждый третий элемент

Как вы понимаете, вместо 3n можно прописать 2n, 7n и даже 69n. В последнем случае каждый шестьдесят девятый элемент станет красным. В итоге наших экспериментов окрасились третий, шестой и девятый блок. А что, если вам нужно, к примеру, так: 1, 4, 7 и так далее. Это реализовать тоже просто! Достаточно дописать так:
div:nth-child(3n+1). И получите нужный результат. Если напишите (3n+2), то будут выбраны блоки 2, 5, 8 и т.д.

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: