Nth child каждый третий элемент. Cтили для каждого третьего элемента.

Nth child каждый третий элемент. Cтили для каждого третьего элемента.

Не редко перед веб мастером стоит задача убрать отступы у каждого третьего элемента в верстке.

Это делается, когда у нас в каждой строке по 3 элемента для того чтобы выровнять последний из них по правому краю вплотную.

Пример структуры html кода для вывода каждого третьего элемента с помощью nth child:

1
2
3
4
5
6
7
8
	<ul class="items">
		<li>Элемент 1</li>
		<li>Элемент 2</li>
		<li>Элемент 3</li>
		<li>Элемент 4</li>
		<li>Элемент 5</li>
		<li>Элемент 6</li>
	</ul>

В выше приведенном коде нам необходимо убрать отступы, ну или проще говоря добавить или изменить стили для каждого третьего элемента, в нашем случае для третьего и шестого.

Nth child каждый третий элемент — пример css кода:

1
2
3
	.items li:nth-child(3n){
		/* стили для каждого третьего элемента с помощью nth-child(3n) */
	}

На этом все, после добавления css кода с вашими стилями получим нужный результат примененные стили для каждого третьего элемента. Если возникнут вопросы или пожелания, рассмотреть реализацию какой-либо задачи, пишите в комментарии, разберем её выполнение в ближайшее время! Всем удачи и успехов в работе!