Nth child: CSS :nth-child() Selector

Содержание

Как работает nth-child — Веб-стандарты

Существует такой селектор, точнее псевдокласс, называемый :nth-child. Вот пример его использования:

ul li:nth-child(3n+3) {
    color: #cccccc;
}

Что делает CSS-код, приведенный выше? Он выбирает каждый третий элемент внутри маркированного списка: это 3-й, 6-й, 9-й, 12-й и т.д. Давайте посмотрим, как именно работает это выражение и что еще можно сделать с помощью :nth-child.

Всё зависит от того, что находится между скобками. Селектор :nth-child принимает два ключевых слова: even и odd. Тут всё просто: even выбирает чётные элементы, такие как 2-й, 4-й, 6-й и т.д., а odd выбирает нечётные элементы, такие как 1-й, 3-й, 5-й и т.д.

Как видно из первого примера, :nth-child также принимает в качестве параметра выражения. В том числе и простейшие уравнения, иначе говоря, просто числа. Если поставить их в скобки, будет выбран только один элемент с соответствующим номером. Например, вот как выбрать только пятый элемент:

ul li:nth-child(5) {
    color: #cccccc;
}

Однако давайте вернемся к 3n+3 из первого примера. Как он работает и почему выбирается каждый третий элемент? Весь фокус в понимании переменной n и приведенного алгебраического уравнения. Подумайте об n, как о начинающемся с нуля множестве целых чисел. Потом дополните уравнение. Так 3n это 3×n, а все уравнение вместе это (3×n)+3. Теперь, подставляя вместо n числа больше или равные нулю, мы получим:

(3 × 0) + 3 = 3 = 3-й элемент
(3 × 1) + 3 = 6 = 6-й элемент

(3 × 2) + 3 = 9 = 9-й элемент и т.д.

А как насчёт :nth-child(2n+1)?

(2 × 0) + 1 = 1 = 1-й элемент
(2 × 1) + 1 = 3 = 3-й элемент
(2 × 2) + 1 = 5 = 5-й элемент и т.д.

Так, стоп! Это ведь то же самое, что и odd. Тогда, возможно, не стоит использовать это выражение? Но разве в этом случае мы не подвергаем наш первый пример излишнему усложнению? Что, если вместо 3n+3 мы запишем 3n+0 или ещё проще 3n?

(3 × 0) = 0 = ничего нет
(3 × 1) = 3 = 3-й элемент
(3 × 2) = 6 = 6-й элемент
(3 × 3) = 9 = 9-й элемент и т.д.

Итак, как вы можете видеть, результат получится такой же, а значит, нет необходимости в

+3. Мы можем использовать и отрицательные значения n, с таким же успехом, как и вычитание в уравнениях. Например, 4n-1:

(4 × 0) – 1 = –1 = ничего нет
(4 × 1) – 1 = 3 = 3-й элемент
(4 × 2) – 1 = 7 = 7-й элемент и т.д.

Использование -n может показаться странным — ведь если конечный результат отрицательный, то никакие элементы в выборку не попадут. Но если дополнить уравнение и снова сделать результат положительным, то выборка окажется довольно интересной: при помощи неё можно будет получить первые n элементов, например так:

-n+3:

–0 + 3 = 3 = 3-й элемент
–1 + 3 = 2 = 2-й элемент
–2 + 3 = 1 = 1-й элемент
–3 + 3 = 0 = ничего нет и т.д.

На SitePoint есть хороший справочник с милой табличкой, которую я бесстыдно опубликую здесь:

n	2n+1	4n+1	4n+4	4n	5n-2	-n+3
0	1	1	4	–	–	3
1	3	5	8	4	3	2
2	5	9	1	8	8	1
3	7	1	1	1	1	–
4	9	17	20	16	18	–
5	11	21	24	20	23	–

Поддержка браузерами#

Селектор :nth-child — один из немногих CSS-селекторов, который почти полностью поддерживается в современных браузерах и абсолютно не поддерживается в IE, даже в IE8. Поэтому когда дело доходит до его использования, и конечный результат сделан по технологии прогрессивного улучшения — вы можете смело использовать его для некоторых оформительских элементов, вроде расцветки строк таблицы. Однако не стоит применять его в более серьезных случаях. Например, полагаться на него в раскладке сайта или удалять правое поле из каждого третьего блока в сетке три на три, чтобы они вошли в ряд.

Спасением здесь может послужить библиотека jQuery, которая реализует поддержку всех CSS-селекторов, включая :nth-child, даже в Internet Explorer.

Всё равно неясно?#

Я не большой поклонник фразы я лучше воспринимаю визуальную информацию. И вы, конечно, тоже. Но примеры являются чрезвычайно полезными именно в таких ситуациях. Чтобы облегчить понимание, я сделал небольшую тестовую страничку. На ней вы сможете написать свои уравнения и ниже увидеть то, что попадет в выборку.

Также загляните на страничку полезных рецептов :nth-child, там вы сможете найти код для наиболее распространенных случаев.

Псевдокласс nth-child — n-ный потомок родителя

Псевдокласс nth-child выбирает элемент, который является n-ным потомком родителя.

Синтаксис

селектор:nth-child(число | odd | even | выражение) { }

Значения

Значение	Описание
число	Положительное число начиная с 1. Задает номер элемента, к которому мы хотим обратиться. Нумерация элементов начинается с 1.
odd	Нечетные элементы.
even	Четные элементы.
выражение	Можно составлять специальные выражения с буквой n, которая обозначает все целые числа от нуля (не от единицы!) до бесконечности. Так, 2n — значит все четные числа (начиная со второго). Как это понять? Подставляем в n последовательно числа от 0 и так далее: если n = 0, то 2n даст 0 — такого элемента нет (нумерация элементов с 1!), если n = 1, то 2n даст 2 — второй элемент, если n = 2, 2n дает 4 — четвертый элемент. Если написать 3n — это будет каждый третий элемент (начиная с третьего!), и так далее.

Пример

В данном примере мы сделаем красного цвета тот li, который является

4-тым потомком своего родителя (4-тым внутри ol):

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> li:nth-child(4) { color: red; }

Пример

Сейчас красными сделаем все четные li:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>

li:nth-child(even) {
 color: red;
}

Пример

Сейчас красными сделаем все нечетные li:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> li:nth-child(odd) { color: red; }

Пример

Сейчас красными сделаем каждую третью li (начиная с третьей):

<ul>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
</ul>

li:nth-child(3n) {
 color: red;
}

Пример

В селекторе можно указать диапазон элементов. Допустим, у вас есть список из 20 элементов и нужно выбрать элементы с 7 по 14 включительно. Это можно сделать вот так:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>

li:nth-child(n+7):nth-child(-n+14) {
 color: red;
}

Как работает CSS-селектор nth-child | CSS-Tricks по-русски

Как работает CSS-селектор nth-child

В CSS существует селектор, если быть более точным, псевдо-селектор, называемый nth-child. Пример его использования:


ul li:nth-child(3n+3) {
	color: #ccc;
}

Вышеприведённый CSS делает следующее: применяет стиля для каждого третьего элемента ненумерованного списка. А именно 3-го, 6-го, 9-го, 12-го и т.д. Но как это работает? А также какую выгоду можно извлечь используя nth-child?

Основной смысл заключается в выражении в скобках. nth-child принимает два ключевых слова: even (чётный) и odd (нечётный). Смысл их абсолютно ясен. Even выбирает чётные элементы (2, 4, 6), odd — нечётные (1, 3, 5).

Как показано в примере выше, nth-child может обрабатывать выражения. Какое самое простое возможное выражение? Просто число. Если вы напишите какое-нибудь число в скобках, то будет выбран один единственный элемент. Например, выберем пятый элемент списка:


ul li:nth-child(5) {
	color : #ccc;
}

Вернёмся к нашему первому примеру, в котором мы использовали выражение (3n+3). Как он работает? Почему он выбирает каждый третий элемент? Вся суть в переменной n. Она принимает целые значения от нуля и больше. Давайте рассмотрим подробнее:


(3 x 0) + 3 = 3 = 3-ий элемент
(3 x 1) + 3 = 6 = 6-ой элемент
(3 x 2) + 3 = 9 = 9-ый элемент
и т.д.

Теперь попробуем следующее выражение: nth-child(2n+1):


(2 x 0) + 1 = 1 = 1-ый элемент
(2 x 1) + 1 = 3 = 3-ий элемент
(2 x 2) + 1 = 5 = 5-ый элемент
и т.д.

В итоге получили тоже самое что и в случае с odd, таким образом нет нужды часто использовать такое выражение. Более того, наш первый пример тоже можно упростить и использовать вместо оригинального выражения (3n+3), выражение (3n):


(3 x 0) + 0 = 0 = нет соответствия
(3 x 1) + 0 = 3 = 3-ий элемент
(3 x 2) + 0 = 6 = 6-ой элемент
и т.д.

Как видите, результат тот же, но не надо писать «+3». Также мы можем использовать отрицательные значения в выражении. Например, 4n-1:


(4 x 0) - 1 = -1 = нет соответствия
(4 x 1) - 1 = 3 = 3-ий элемент
(4 x 2) - 1 = 7 = 7-ой элемент
и т.д.

Использование отрицательных значений для коэффициента при n, выглядит слегка странно, потому что в случае отрицательного результата не будет найдено соответствие. Вам надо будет постоянно изменять выражение, чтобы добавить положительных элементов. Как оказалось, этот подход очень удобен для выбора первых n элементов. Рассмотрим пример с «-n+3»:


-0 + 3 = 3 = 3ий элемент
-1 + 3 = 2 = 2-ой элемент
-2 + 3 = 1 = 1-ый элемент
-3 + 3 = 0 = нет соответствия

Кроссбраузерность

nth-child является одним из тех самых несчастных атрибутов, которые являются полностью кроссбраузерными, за исключением абсолютного нуля в IE, даже 8-ой версии. Поэтому, когда речь заходит о его использовании, то если ожидаемый результат — это в некотором роде визуальный эффект (например раскраска строк некой таблицы), то это идеальный подход. Но, вероятно, не стоит использовать его для чего-то более важного, что может повлиять, например, на корректность вёрстки.

Конечно, если вы используете jQuery, то вам не стоит переживать по этому поводу, так как jQuery работает даже в Internet Explorer.

Ну и напоследок

Вы можете поиграть с различными выражениями для селектора на страничке с примером.

Использование псевдокласса :nth-child — Демонстрации — HTML Academy

Что такое `:nth-child`?

:nth-child — это псевдокласс, который позволяет выбирать элементы по их порядковому номеру. Например, можно выбрать пятый абзац и применить к нему нужные стили, или выбрать все четные строки в таблице и сделать её полосатой.

В этой демонстрации мы детально разберем механизм работы этого селектора. Начнем с исходной html-разметки. Работать будем с обычным списком.

Подопытный объект готов

Зададим стили для списка и его элементов. Теперь у нас есть наглядная сетка, над которой и будем экспериментировать.

:nth-child(4)

Самый простой вариант использования данного селектора: задать конкретное число. Наш селектор:

li:nth-child(4)

Он обозначает: «Выбрать четвёртый по счету элемент списка». Как видите, подсветился нужный элемент.

Несколько `:nth-child`(номер)

Чтобы выбрать небольшое количество элементов, можно несколько раз использовать :nth-child с нужными номерами.

Однако, если количество таких элементов велико, то такой подход не сработает. Представьте, сколько CSS-кода нужно, чтобы выделить все чётные элементы в примере.

Не забывайте экспериментировать. Поменяйте номера в CSS-коде, чтобы подсветить другие элементы.

`:nth-child(2n)`

В общем виде значение этого псевдокласса задаётся с помощью выражения: an+b, где a и b — целые числа, а n — счетчик, принимающий целые значения от 0 и больше: 0,1,2,3…

Если после вычисления выражения браузер находит элемент с полученным номером, то он применяет к нему стили. Рассмотрим пример вычисления номеров для :nth-child(2n).

1. n=0; 2*0 = 0; нет элементов
2. n=1; 2*1 = 2; 2-ой элемент
3. n=2; 2*2 = 4; 4-й элемент

`:nth-child(even)`

Выражение :nth-child(2n) соответствует всем чётным элементам. Для чётных элементов существует также специальное ключевое слово even.

`:nth-child(2n+1)`

Посчитаем номера для :nth-child(2n+1).

1. n=0; 2*0 + 1 = 1; 1-ый элемент
2. n=1; 2*1 + 1 = 3; 3-ий элемент
3. n=2; 2*2 + 1 = 5; 5-ый элемент
...

Т.е. все нечётные элементы.

`:nth-child(odd)`

Для нечётных элементов тоже существует ключевое слово: odd.

`:nth-child(odd)` вместе с `:nth-child(even)`

Используя разные стили для чётных и нечётных элементов, можно создавать интересные визуальные эффекты. Именно таким образом, с помощью чистого CSS, делают полосатые таблицы.

`:nth-child(3n-1)`

Рассчитаем выражение посложнее :nth-child(3n-1).

1. n=0; 3*0 - 1 = -1; нет элементов
2. n=1; 3*1 - 1 = 2;  2-ой элемент
3. n=2; 3*2 - 1 = 5;  5-ый элемент
...

Поэкспериментируйте с выражением в стилях.

`:nth-child(n+8)`

Если использовать большое положительное число b в формуле an+b, то можно выделять все элементы, за исключением начальных. И чем больше b, тем больше начальных пропускается. Расчет для :nth-child(n+8):

1. n=0; 0+8 = 8;  8-ой элемент
2. n=1; 1+8 = 9;  9-ой элемент
3. n=2; 2+8 = 10; 10-ый элемент
...

`:nth-child(-n+14)`

Можно использовать отрицательный n. Расчёт для :nth-child(-n+14):

1. n=0; 0+14 = 14; 14-ый элемент
2. n=1; -1+14 = 13; 13-ый элемент
...
15. n=14; -14+14 = 0; нет совпадений

Т.е. :nth-child(n+8) означает не выделять 7 элементов вначале, а все остальное выделить. :nth-child(-n+14) обозначает выделить 14 элементов в начале, а все остальное не выделять.

Комбинирование выражений

На предыдущих шагах мы с помощью разных выражений выделяли разные множества элементов. Существует возможность задавать множество с помощью комбинирования выражений.

Например: :nth-child(n+8):nth-child(-n+14). Итоговое множество получается как пересечение двух исходных:

:nth-child(n+8) выделит: 8-21
:nth-child(-n+14) выделит: 1-14
на пересечении 1-14 и 8-21: 8-14

`:nth-child(n+4):nth-child(-n+18)`

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

Сдвинем левую границу: :nth-child(n+8) → :nth-child(n+4)

Сдвинем правую границу: :nth-child(-n+14) → :nth-child(-n+18)

Попробуйте поизменять размер выделения

`:nth-child(n+4):nth-child(-n+18):nth-child(odd)`

Можно комбинировать более двух выражений. Выражение в заголовке обозначает: «взять элементы с 4 по 18 включительно и среди них выделить только нечётные».

Два сложных множества

Мы создали множество «элементы с 4 по 18 включительно, нечётные».

Создадим второе множество «элементы с 4 по 18 включительно, чётные».

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

Псевдокласс `:nth-of-type`

:nth-of-type работает почти так же, как и :nth-child. Разница заключается в том, что он учитывает тип элемента.

Для того, чтобы поэкспериментировать с этим псевдоклассом, изменим код примера. Вначале в HTML коде создадим список из двух элементов: span и strong. И обернём этот список в контейнер.

Второй подопытный готов

С помощью CSS оформим список. span будут лежачими прямоугольниками, а strong будут стоячими прямоугольниками.

Приступаем к экспериментам.

`:nth-of-type(3)`

Попробуем простейшие выражения с числом.

Выделить третий span:

span:nth-of-type(3)

Выделить пятый strong:

strong:nth-of-type(5)

`:nth-of-type(odd)`

Выражения с чётными/нечётными элементами.

Выделить нечётные span:

span:nth-of-type(odd)

Выделить чётные strong:

strong:nth-of-type(even)

Комбинированные `:nth-of-type`

Выделить нечётные span из первых четырёх:

span:nth-of-type(odd):nth-of-type(-n+4)

Выделить чётные strong из идущих после четвёртого:

strong:nth-of-type(even):nth-of-type(n+5)

Отличие `:nth-of-type` от `:nth-child`

Значения для двух псевдоклассов задаются абсолютно одинаково. Отличие заключается в том, что нумерация элементов при использовании :nth-of-type идёт только между потомками одного родителя заданного типа. Нумерация элементов при использовании :nth-child идёт между всеми потомками одного родителя.

Продемонстрируем это отличие еще раз. span:nth-of-type(odd) подсвечивает только нечётные лежачие прямоугольники.

Отличие `:nth-of-type` от `:nth-child`

Если для этого же кода использовать span:nth-child(odd), то подсвечиваются все лежачие прямоугольники.

Это связано с тем, что после каждого элемента span, расположен strong, который влияет на счетчик псевдокласса :nth-child.

Практический пример использования `:nth-child`

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

Сверстать такой блок не проблема. Можно задать разные классы элементам левой и правой колонок и пусть программист мучается при генерации правильного html кода страницы.

Но намного лучше сверстать такой список товаров, не используя разные классы. На этом шаге задан исходный HTML.

Практический пример: оформляем товары

Зададим базовый CSS код нашего каталога. Пунктирные линии справа и слева — это границы блока, по которым должны выравниваться края колонок.

Нужно создать двухколончатую сетку, в которой ширина каждой колонки составляет 45% от ширины родительского блока. Правая колонка прижата к правому краю, а левая к левому. Приступим.

Практический пример: сетка

Чтобы получить нужную сетку, достаточно задать следующие проценты:

45% - ширина левой колонки
10% - отступ справа левой колонки
45% - ширина правой колонки
Итого: 45% + 10% + 45% = 100%

Мы использовали box-sizing:border-box;, чтобы на ширину колонок не влияли границы. Товары расположились в одну колонку, зато она правильной ширины.

Практический пример: две колонки

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

Мы не используем разные классы для разных элементов, поэтому на помощь приходит псевдокласс li:nth-child(even). С помощью него удаляются лишние отступы и идеальная сетка готова.

Практический пример: три колонки

При таком подходе можно изменять количество колонок только с помощью CSS. То есть, HTML код страницы, а значит и логику генерации кода на сервере менять не надо.

Сначала изменим проценты:

30% - ширина колонок
5% - отступы справа у 1 и 2 колонки
Итого: 30% + 5% + 30% + 5% + 30% = 100%

Практический пример: три колонки готовы

Затем нужно удалить отступ справа у каждого третьего элемента. Для этого используем li:nth-child(3n). Готово!

Отличное решение, особенно для адаптивной верстки.

Различия между :nth-child и :nth-of-type / Хабр

Допустим, есть такой HTML:

<section>
<p>Little</p>
<p>Piggy</p> <!— Нужен этот элемент —>
</section>

Следующий CSS будет делать одно и тоже:

p:nth-child(2) { color: red; }

p:nth-of-type(2) { color: red; }

Хотя, конечно, в этих селекторах, есть разница.

Псевдокласс :nth-child, означачает выбрать элемент, если:

Этот элемент — параграф;
Это второй элемент одного родителя.

Псевдокласс :nth-of-type, означает:

Выбрать второй параграф одного родителя.

Предположим, что наша разметка изменена следующим образом:

<section>
   <h2>Words</h2>
   <p>Little</p>
   <p>Piggy</p>    <!— Нужен этот элемент —>
</section>

Теперь первый вариант не работает:

p:nth-child(2) { color: red; } /* Не работает */

Второй продолжает работать:

p:nth-of-type(2) { color: red; } /* Продолжает работать */

Под «Не работает» я имею ввиду, что cелектор :nth-child выбирает слово «Little» вместо «Piggy». Потому что элемент выполняет оба условия: 1) Это второй элемент родительского элемента и 2) Это параграф. Под «Продолжает работать», я имею ввиду, что селектор продолжает выбираться «Piggy», потому что это второй параграф родительского элемента.

Если добавить <h3> после <h2>, то селектор с :nth-child не выберет ничего, потому что параграф больше не является вторым элементом. Селектор с :nth-of-type продолжит работать.

Мне кажется :nth-of-type менее хрупкий и более полезный в целом, несмотря на это :nth-child продолжает быть основным в работе. Как часто вы думаете «Я хочу выбрать второй элемент в родительском блоке, если это параграф». Возможно иногда, но чаще вы думаете «Выбрать второй параграф» или «выбрать каждую третью строку таблицы», для этих задач больше подходит :nth-of-type (опять же, на мой взгляд).

Большинство ситуаций, когда я говорю «Почему мой селектор с :nth-child не работает?» случаются из за того, что я забываю про выборку тегов и нужный тег не оказывается по счету тем, который нужен. Поэтому, при использовании :nth-child лучше указывать его от родителя и не использовать привязку к тегу.

dl :nth-child(2) { } /* Этот вариант лучше чем */
dd:nth-child(2) { } /* этот */

Но, конечно, все зависит от конкретной ситуации.

Поддержка браузерами :nth-of-type довольно приличная… Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+. Я бы сказал, если вам нужна более глубокая поддержка, то используйте jQuery (используйте селектор и применяйте класс, там где нужно), но jQuery прекратил поддержку :nth-of-type. Слышал, что из за редкого использования, но мне это кажется странным. Если вы хотите пойти этим путем, то вот плагин возвращающий поддержку назад.

как использовать CSS селектор nth-child

От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе с псевдоклассом nth-child.

N значит nth-child

В CSS есть множество мощных селекторов, с помощью которых можно находить элементы на странице и применять к ним стили.
Из-за гибкости выражения для нахождения элементов по шаблону (an+b) псевдокласс nth-child, возможно, является самым мощным. Более подробно данный псевдокласс был разобран в видеоуроке. В этом уроке мы узнаем, когда лучше использовать nth-child, а когда лучше обойтись обычным классом.

Когда нужно использовать nth-child?

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

Во-первых, все селекторы типа nth-child поддерживаются только в IE9 и выше (исключение :first-child). То есть первым делом необходимо определиться с диапазоном браузеров, с которыми вы будете работать. Если вам придется работать с IE8, вы можете использовать обычные классы или :first-child.

Совет 1: если вы поддерживаете IE8, используйте :first-child

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

CSS от А до Я: как использовать CSS селектор nth-child

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

.site-nav li { border-left: 2px solid grey; } .site-nav li:first-child { border: 0; }

.site-nav li {

border-left: 2px solid grey;

}

.site-nav li:first-child {

border: 0;

}

Так же можно поступить и для верхних и нижних рамок. Если же вам посчастливилось не поддерживать IE8, читайте дальше…

Совет 2: используйте вместо классов :first-child и :last-child

Если вы создаете или используете готовую сетку, и вам нужно сделать что-то с первой и последней ячейками в ряду, воспользуйтесь псевдоклассами :first-child и :last-child вместо классов типа .first и .last в HTML.

Так ваш HTML код будет выглядеть чище, и вам не придется слишком много думать во время разработки макета. Иногда макеты бывают очень сложными. Чем меньше вам нужно думать над ним, тем лучше.

Совет 3: используйте nth-child для альтернативных стилей

Классический пример альтернативных стилей – разный фон для четных и нечетных строк в таблице. Еще один пример – обтекание четных и нечетных блоков контента по левому и правому краю на странице или в контейнере (нить комментариев или диалог).

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В таких случаях я использую :nth-child(odd) и :nth-child(even). Чтобы не засорять код, пропишите первое состояние без nth-child, после чего уже используйте nth-child с большей специфичностью для альтернативных стилей.

/* вот так */ .data-table tr { background: white; } .data-table tr:nth-child(even) { background: lightgrey; } /* а не так */ .data-table tr:nth-child(odd) { background: white; } .data-table tr:nth-child(even) { background: lightgrey; }

/* вот так */

.data-table tr {

background: white;

}

.data-table tr:nth-child(even) {

background: lightgrey;

}

/* а не так */

.data-table tr:nth-child(odd) {

background: white;

}

.data-table tr:nth-child(even) {

background: lightgrey;

}

Совет 4: избегайте странных и сложных выражений с nth-child

Для более сложных выборок на странице я предпочитаю прописывать классы напрямую в HTML, а не работать с запутанными выражениями nth-child.

Выражения типа li:nth-child(-n+3) или li:nth-child(5n+1):not(nth-child(3n-1)) слишком сложны для понимания. Понятия не имею, что они значат, но они работают!

К сожалению, в некоторых сложных дизайнах без таких выражений не обойтись. Но представьте, что вы вернетесь к коду через пару месяцев и попытаетесь понять, что вы хотели сделать. Даже у опытных экспертов по CSS на это уйдет довольно много времени!

Совет 5: используйте nth-child, когда не можете контролировать HTML

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

При создании шаблона для сайта на CMS у вас будет возможность контролировать HTML структуру и создавать классы и атрибуты. Однако иногда в ваших шаблонах будут такие места, куда будет вставляться контент из текстовых полей или областей из самой CMS. Классический пример – WP the_content – один большой кусок HTML, который вы либо плохо контролируете, либо не контролируете вообще.

В этой ситуации вам помогут :first-child, :last-child и :nth-child. Вот и все, 5 советов по тому, как использовать или не использовать самые мощные и гибкие CSS селекторы.

Автор: Guy Routledge

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Выборка элементов в CSS через псевдоклассы — first-child, last-child и nth-child

Третье поколение CSS принесло в вёрстку такое понятие, как псеводклассы. Сегодня речь пойдет о first-child, last-child и nth-child. С помощью них можно легко переоформить первый или последний элемент списка, изменить цвет второй строки таблицы или выделить первые пять ячеек таблицы. И всё это без использования javascript.

«first-child» — выбирает первый элемент родителя;
«last-child» — указывает на последний элемент родителя;
«nth-child» — выбирает элементы исходя по параметру с начала;
«nth-last-child» — то же самое, но начиная с конца.

С помощью «first-child» и «last-child» можно выбрать и переоформить первый или последний элемент родителя. Посмотрим как это выглядит на примере. Для этого применим стили к ячейкам таблицы с идентификатором «primer» (id=»primer»).


<style>
    #primer tr:first-child td { background-color:red; }
    #primer tr:last-child td { background-color:green; }
</style>

1.1	1.2	1.3	1.4
2.1	2.2	2.3	2.4
3.1	3.2	3.3	3.4
4.1	4.2	4.3	4.4
5.1	5.2	5.3	5.4

Псевдолкасс «nth-child» предоставляет более интересные возможности. Он позволяет применить стиль к элементам в зависимости от их порядкового номера в дереве DOM. Псевдокласс может принимать параметры:

«odd» — выбрать нечетные элементы;
«even» — выбрать четные элементы;
число — выбрать элемент с определенным порядковым номером;
выражение вида an+b.

Примеры использования nth-child()

Начинаем разбираться. Применим к таблице стиль для задания фона чётным и нечетным строкам:


<style>
    #primer tr:nth-child(odd) td { background-color:red; }
    #primer tr:nth-child(even) td { background-color:green; }
</style>

1.1	1.2	1.3	1.4
2.1	2.2	2.3	2.4
3.1	3.2	3.3	3.4
4.1	4.2	4.3	4.4
5.1	5.2	5.3	5.4

Если в качестве параметра к nth-child() указать число, то можно выделить элементы по их порядковому номеру внутри родительского:


<style>
    #primer td:nth-child(2) { background-color:red; }
    #primer td:nth-child(3) { background-color:green; }
</style>

1.1	1.2	1.3	1.4
2.1	2.2	2.3	2.4
3.1	3.2	3.3	3.4
4.1	4.2	4.3	4.4
5.1	5.2	5.3	5.4

В качестве параметра можно задавать выражения вида «an+b», где «a» и «b» целые числа, а «n» — переменная, которая последовательно изменяется от 0 до количества элементов селектора. Рассмотрим пример выделения красным цветом только первых двух строк и каждого четвертого столбца.


<style>
    #primer tr:nth-child(-n+2) td { background-color:red; }
    #primer td:nth-child(4n+4) { background-color:red; }
</style>

1.1	1.2	1.3	1.4	1.5	1.6	1.7	1.8
2.1	2.2	2.3	2.4	2.5	2.6	2.7	2.8
3.1	3.2	3.3	3.4	3.5	3.6	3.7	3.8
4.1	4.2	4.3	4.4	4.5	4.6	4.7	4.8
5.1	5.2	5.3	5.4	5.5	5.6	5.7	5.8

Выбора только первых трёх элементов списка:

li:nth-child(-n+3)

Выбора последних трёх элементов списка:

li:nth-child(n+3)

Выбора каждого третьего элемента списка:

li:nth-child(3n+1)

Псевдокласс nth-last-child()

Осталось разобрать псевдокласс «nth-last-child». Его отличие от «nth-child» в том, что весь отсчёт идёт от конца селектора. Примером может служить ситуация, когда требуется выделить ячейку таблицы «ИТОГО». Как правило, это последняя ячейка последней строки:


<style>
    #primer tr:nth-child(1) td:nth-child(1) {background-color:red;}
    #primer tr:nth-last-child(1) td:nth-last-child(1) {background-color:green;}
</style>

1.1	1.2	1.3	1.4
2.1	2.2	2.3	2.4
3.1	3.2	3.3	3.4
4.1	4.2	4.3	4.4
5.1	5.2	5.3	5.4

Псевдоклассы CSS могут применяться к любым элементам html документа.

Как работает nth-child — Веб-стандарты

Существует такой селектор, точнее псевдокласс, называемый : nth-child . Вот пример его использования:

  ul li: nth-child (3n + 3) {
    цвет: #cccccc;
}

Всё зависит от того, что находится между скобками. Селектор : nth-child принимает два ключевых слова: четное и нечетное . Тут всё просто: четные выбирает чётные элементы, такие как 2-й, 4-й, 6-й и т.д., а нечетные выбирает нечётные элементы, такие как 1-й, 3-й, 5- й и т.д.

Как видно из первого примера, : nth-child также принимает в качестве выражения выражения. В том числе и простейшие уравнения, иначе говоря, просто числа.Если поставить их в скобки, будет выбран только один элемент с соответствующим номером. Например, вот как выбрать только пятый элемент:

  ul li: nth-child (5) {
    цвет: #cccccc;
}

Однако давайте вернемся к 3n + 3 из первого примера. Как он работает и почему выбирается каждый третий элемент? Весь фокус в понимании модели n и приведенного алгебраического уравнения. Подумайте об n , как о начинающемся с нуля множестве целых чисел.Потом дополните уравнение. Так 3n это 3 × n , а все уравнение вместе это (3 × n) +3 . Теперь, подставляя вместо n числа больше или равные нулю, мы получим:

(3 × 0) + 3 = 3 = 3-й элемент
(3 × 1) + 3 = 6 = 6-й элемент
(3 × 2) + 3 = 9 = 9-й элемент и т.д.

А как насчёт : nth-child (2n + 1) ?

(2 × 0) + 1 = 1 = 1-й элемент
(2 × 1) + 1 = 3 = 3-й элемент
(2 × 2) + 1 = 5 = 5-й элемент и т.д.

Так, стоп! Это ведь то же самое, что и , нечет . Тогда, возможно, не стоит использовать это выражение? Но разве в этом случае мы негаем наш первый пример излишнему усложнению? Что, если вместо 3n + 3 мы запишем 3n + 0 или ещё проще 3n ?

(3 × 0) = 0 = ничего нет
(3 × 1) = 3 = 3-й элемент
(3 × 2) = 6 = 6-й элемент
(3 × 3) = 9 = 9-й элемент и т.д.

Итак, как вы видите, результат получится такой же, а значит, нет необходимости в +3 .Мы можем использовать и отрицательные значения n , с таким же успехом, как и вычитание в уравнениях. Например, 4n-1 :

(4 × 0) — 1 = –1 = ничего нет
(4 × 1) — 1 = 3 = 3-й элемент
(4 × 2) — 1 = 7 = 7-й элемент и т.д.

Использование -n может показаться странным — ведь если конечный результат отрицательный, то никакие элементы в выборку не попадут. При помощи можно получить первые n элементов, например так: -n + 3 :

–0 + 3 = 3 = 3- й элемент
–1 + 3 = 2 = 2-й элемент
–2 + 3 = 1 = 1-й элемент
–3 + 3 = 0 = ничего нет и т.д.

На SitePoint есть хороший справочник с милой табличкой, которую я бесстыдно опубликую здесь:

n	2n + 1	4n + 1	4n + 4	4n		— 2 90 — 2 90 п + 3
0	1	1	4	—	—	3
1	3	4 8									2
2	5	9	1	8	8	1
3	7	1	4 1	1		4	9	17	20	16	18	—
5	11	21	24	20	23-	23-	0143

Поддержка браузерами #

Селектор : nth-child — один из немногих CSS-селекторов, который почти полностью поддерживается в современных браузерах и абсолютно не поддерживается в IE, даже в IE8.Поэтому когда дело доходит до его использования, и конечный результат сделан по технологии прогрессивного улучшения — вы можете смело использовать его для некоторых оформительских элементов, вроде расцветки строк таблицы. Однако не стоит его применять в более серьезных случаях. Например, полагаться на него в раскладке сайта или удалить правое поле из каждого третьего блока в сетке три на три, чтобы они вошли в ряд.

Спасением здесь может послужить jQuery, которая реализует поддержку всех CSS-селекторов, включая : nth-child , даже в Internet Explorer.

Всё равно неясно? #

Я не большой поклонник фразы я лучше воспринимаю визуальную информацию. И вы, конечно, тоже. Примеры являются очень полезными именно в таких ситуациях. Чтобы облегчить понимание, я сделал небольшую тестовую страничку. На ней вы сможете написать свои уравнения и ниже увидеть то, что попадет в выборку.

Также загляните на страничку полезных рецептов : nth-child , там вы сможете найти код для наиболее распространенных случаев.

Псевдокласс nth-child — н-ный потомок родителя

Псевдокласс nth-child выбирает элемент, который является н-ным потомком родителя.

Синтаксис

селектор: nth-child (число | нечетное | четное | выражение) { }

Значения

Значение	Описание
число	Положительное число начиная с 1. Задает номер элемента, к используемому мы хотим. Нумерация элементов начинается с 1.
нечет	Нечетные элементы.
даже	Четные элементы.
выражение	Можно составлять специальные выражения с буквой n, которая обозначает все целые числа от нуля (не от единицы!) до бесконечности. Так, 2n — значит все четные числа (начиная со второго второго). Как это понять? Подставляем в n последовательных число от 0 и так далее: если n = 0, то 2n даст 0 — такого элемента нет ( нумерация элементов с 1! ), если n = 1, то 2n даст 2 — второй элемент, если n = 2, 2n дает 4 — четвертый элемент.Если написать 3n — это будет каждый третий элемент (начиная с третьего!), И так далее.

Пример

В данном примере мы сделаем красного цвета тот li, который является 4-тым потомком своего родителя (4-тым внутри ол):

элемент списка
элемент списка
элемент списка
элемент списка
элемент списка

 li: nth-child (4) {
красный цвет;
}

Пример

Сейчас красными сделаем все четные li:

элемент списка
элемент списка
элемент списка
элемент списка
элемент списка

 li: nth-child (even) {
красный цвет;
}

Пример

Сейчас красными сделаем все нечетные li:

элемент списка
элемент списка
элемент списка
элемент списка
элемент списка

 li: nth-child (odd) {
красный цвет;
}

Пример

Сейчас красными сделаем каждую третью ли (начиная с третьей):

элемент списка
элемент списка
элемент списка
элемент списка
элемент списка

 li: nth-child (3n) {
красный цвет;
}

Пример

В селекторе можно указать диапазон элементов.Допустим, у вас есть список из 20 элементов и нужно выбрать элементы с 7 по 14 включительно. Это можно сделать вот так:

элемент списка
элемент списка
элемент списка
элемент списка
элемент списка
элемент списка
элемент списка
элемент списка
элемент списка
элемент списка
элемент списка
элемент списка
элемент списка
элемент списка
элемент списка
элемент списка
элемент списка
элемент списка
элемент списка
элемент списка

 li: nth-child (n + 7): nth-child (-n + 14) {
красный цвет;
}

Как работает CSS-селектор nth-child | CSS-Tricks по-русски

Как работает CSS-селектор nth-child

В CSS существует селектор, если быть более точным, псевдо-селектор, называемый nth-child. Пример его использования:

  ul li: nth-child (3n + 3) {
цвет: #ccc;
}

Основной смысл заключается в выражении в скобках. nth-ребенок принимает два ключевых слова: четный (чётный) и нечетный (нечётный). Смысл их абсолютно ясен. Четный выбирает чётные элементы (2, 4, 6), нечетный — нечётные (1, 3, 5).

Как показано в примере выше, nth-child может обрабатывать выражение. Какое самое простое возможное выражение? Просто число. Если вы напишите какое-нибудь число в скобках, то будет выбран один единственный элемент.Например, выберем пятый элемент списка:

  ul li: nth-child (5) {
цвет: #ccc;
}

Вернёмся к нашему первому примеру, в котором мы использовали выражение (3n + 3). Как он работает? Почему он выбирает каждый третий элемент? Вся суть в переменных n. Она принимает целые значения от нуля и больше. Давайте рассмотрим подробнее:

  (3 x 0) + 3 = 3 = 3-ий элемент
(3 х 1) + 3 = 6 = 6-й элемент
(3 x 2) + 3 = 9 = 9-ый элемент
и т.д.

Теперь попробуем следующее выражение: nth-child (2n + 1):

  (2 x 0) + 1 = 1 = 1-ый элемент
(2 x 1) + 1 = 3 = 3-ий элемент
(2 x 2) + 1 = 5 = 5-ый элемент
и т.д.

В итоге получили тоже самое что и в случае с нечетным, таким образом, нет нужды часто использовать такое выражение. Более того, наш первый пример тоже можно упростить и использовать вместо оригинального выражения (3n + 3), выражение (3n):

  (3 x 0) + 0 = 0 = нет соответствия
(3 x 1) + 0 = 3 = 3-ий элемент
(3 х 2) + 0 = 6 = 6-ой элемент
и т.д.

Как видите, результат тот же, но не надо писать «+3». Также мы можем использовать отрицательные значения в выражении. Например, 4н-1:

  (4 x 0) - 1 = -1 = нет соответствия
(4 x 1) - 1 = 3 = 3-ий элемент
(4 х 2) - 1 = 7 = 7-й элемент
и т.д.

Использование отрицательных значений для коэффициента при n, выглядит слегка странно, потому что в случае отрицательного результата не будет найдено соответствие. Вам надо постоянно будет выражение, чтобы добавить положительные элементы.Как оказалось, этот подход очень удобен для выбора первых n элементов. Рассмотрим пример с «-n + 3»:

  -0 + 3 = 3 = 3ий элемент
-1 + 3 = 2 = 2-й элемент
-2 + 3 = 1 = 1-ый элемент
-3 + 3 = 0 = нет соответствия

Кроссбраузерность

nth-child является одним из тех самых удивительных версий атрибутов, которые являются полностью кроссбраузерными, за исключением абсолютного нуля в IE, даже 8-ой. Поэтому, когда речь заходит о его использовании, то если ожидаемый результат — это в некотором роде визуальный эффект (например, раскраска строки некой таблицы), то это идеальный подход.Но, вероятно, не стоит использовать его для чего-то более важного, что может повлиять, например, на корректность вёрстки.

Ну и напоследок

Вы можете поиграть различными выражениями для селектора на страничке с примером.

Использование псевдокласса: nth-child — Демонстрации — HTML Academy

Что такое `: nth-child` ?

: nth-child — это псевдокласс, который позволяет выбирать элементы по их порядковому номеру. Например, можно выбрать пятый абзац и применить к нему стили, или выбрать все четные строки в таблице и сделать ее полосатой.

Подопытный объект готов

: nth-child (4)

Самый простой вариант использования данного селектора: задать конкретное число. Наш селектор:

  li: nth-child (4)

Он обозначает: «Выбрать четвёртый по счету элемент списка». Как видите, подсветился нужный элемент.

Несколько `: nth-child` (номер)

Чтобы выбрать небольшое количество элементов, можно несколько раз использовать : nth-child с нужными номерами.

Не забывайте экспериментировать. Поменяйте номера в CSS-коде, чтобы подсветить другие элементы.

`: nth-child (2n)`

В общем виде значение этой псевдокласса задаётся с помощью выражения: an + b , где a и b — целые числа, а n — счетчик, принимающий целые значения от 0 и больше: 0,1,2,3…

Если после выражения браузер находит элемент с полученным номером, то он применяет к нему стили.Рассмотрим пример вычисления номеров для : nth-child (2n) .

  1. n = 0; 2 * 0 = 0; нет элементов
2. n = 1; 2 * 1 = 2; 2-ой элемент
3. n = 2; 2 * 2 = 4; 4-й элемент

`: nth-child (четный)`

Выражение : nth-child (2n) соответствует всем чётным элементом. Для чётных элементов существует также специальное слово даже .

`: nth-child (2n + 1)`

Посчитаем номера для : nth-child (2n + 1) .

  1. n = 0; 2 * 0 + 1 = 1; 1-ый элемент
2. n = 1; 2 * 1 + 1 = 3; 3-ий элемент
3. n = 2; 2 * 2 + 1 = 5; 5-ый элемент
...

Т.е. все нечётные элементы.

`: nth-child (odd)`

Для нечётных элементов тоже используется слово: odd .

`: nth-child (нечетное)` вместе с `: nth-child (четное)`

Используя разные стили для чётных и нечётных элементов, можно создать интересные визуальные эффекты.Именно таким образом, с помощью чистого CSS, делают полосатые таблицы.

`: nth-child (3n-1)`

Рассчитаем выражение посложнее : nth-child (3n-1) .

  1. n = 0; 3 * 0 - 1 = -1; нет элементов
2. n = 1; 3 * 1 - 1 = 2; 2-ой элемент
3. n = 2; 3 * 2 - 1 = 5; 5-ый элемент
...

Поэкспериментируйте с выражением вх.

`: nth-child (n + 8)`

Если использовать большое положительное число b в формуле an + b , то можно выделить все элементы, за исключением начальных.И чем больше b , тем больше начальных пропускается. Расчет для : nth-child (n + 8) :

  1. n = 0; 0 + 8 = 8; 8-ой элемент
2. n = 1; 1 + 8 = 9; 9-ой элемент
3. n = 2; 2 + 8 = 10; 10-ый элемент
...

`: nth-child (-n + 14)`

Можно использовать отрицательный n . Расчёт для : nth-child (-n + 14) :

  1. n = 0; 0 + 14 = 14; 14-ый элемент
2. n = 1; -1 + 14 = 13; 13-ый элемент
...
15. n = 14; -14 + 14 = 0; нет совпадений

Т.е. : nth-child (n + 8) означает не выделять 7 элементов вначале, а все остальное выделять. : nth-child (-n + 14) обозначает 14 элементов в начале, а все остальное не выделять.

Комбинирование выражений

На предыдущих шагах мы с разными выражениями выделяли разные множественные элементы. Существует возможность задавать множество с помощью комбинирования выражений.

Например: : nth-child (n + 8): nth-child (-n + 14) . Итоговое множество получается как пересечение двух исходных:

 : nth-child (n + 8) выделит: 8-21
: nth-child (-n + 14) выделит: 1-14
на пересечение 1-14 и 8-21: 8-14

`: nth-child (n + 4): nth-child (-n + 18)`

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

Сдвинем левую границу: : nth-child (n + 8) → : nth-child (n + 4)

Сдвинем правую границу: : nth-child (-n + 14) → : nth-child (-n + 18)

Попробуйте поизменять размер выделения

`: nth-child (n + 4): nth-child (-n + 18): nth-child (odd)`

Два числовых числа

Мы создали «элементы с 4 по 18 включительно, нечётные».

Создадим второй набор «элементов с 4 по 18 включительно, чётные».

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

Псевдокласс `: nth-of-type`

: nth-of-type работает почти так же, как и : nth-child .Разница заключается в том, что он учитывает тип элемента.

Для того, чтобы поэкспериментировать с этим псевдоклассом, изменим код пример. Вначале в HTML коде создадим список из двух элементов: span и strong . И обернём этот список в контейнер.

Второй подопытный готов

С помощью CSS оформим список. пролет будут лежачими прямоугольниками, пролет будут стоячими прямоугольниками.

Приступаем к экспериментам.

`: nth-of-type (3)`

Попробуем простейшие выражения с числом.

Выделить третий пролет :

  пролет: nth-of-type (3)

Выделить пятый strong :

  strong: nth-of-type (5)

`: nth- типовые (нечетные)`

Выражения с чётными / нечётными элементами.

Выделить нечётные пролет :

  пролет: nth-of-type (нечетный)

Выделить чётные strong :

  strong: nth-of-type (четный)

Комбинированные `-типа`

Выделить нечётные пролет из первых четырёх:

  пролёт: nth-of-type (нечётный): nth-of-type (-n + 4)

Выделить чётные strong из идущих после четвёртого:

  strong: nth-of-type (четное): nth-of-type (n + 5)

Отличие `: nth-of-type` от `: nth-child`

Значения для двух псевдоклассов задаются абсолютно одинаково.Отличие заключается в том, что нумерация элементов при одном использовании : nth-of-type идёт только между потомками родителя заданного типа. Нумерация элементов при использовании : n-ый ребенок идёт между всеми потомками одного родителя.

Продемонстрируем это отличие еще раз. пролет: n-й тип (нечетный) подсвечивает только нечётные лежачие прямоугольники.

Отличие `: nth-of-type` от `: nth-child`

Если для этого же кода использовать span: nth-child (odd) , то подсвечиваются все лежачие прямоугольники.

Это связано с тем, что после каждого элемента span , расположен strong , который влияет на счетчик псевдокласса : nth-child .

Практический пример использования `: nth-child`

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

Но намного лучше сверстать такой список товаров, не используя разные классы. На этом шаге задан исходный HTML.

Практический пример: оформление товаров

Практический пример: сетка

Чтобы получить нужную сетку, достаточно задать следующие проценты:

  45% - ширина левой колонки
10% - отступ вправо левой колонки
45% - ширина правой колонки
Итого: 45% + 10% + 45% = 100%

Мы использовали box-sizing: border-box; , чтобы на ширину колонок не влияли границы. Товары расположились в одну колонку, зато она правильной ширины.

Практический пример: две колонки

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

Мы не используем разные классы для разных элементов, поэтому на помощь приходит псевдокласс li: nth-child (even) . С помощью него удаляются лишние отступы и идеальная сетка готова.

Практический пример: три колонки

При таком подходе можно проверить количество колонок только с помощью CSS. То есть, HTML код страницы, а значит и логику генерации кода на сервере менять не надо.

Сначала изменим проценты:

  30% - ширина колонок
5% - отступы справа у 1 и 2 колонки
Итого: 30% + 5% + 30% + 5% + 30% = 100%

Практический пример: три колонки готовы

Затем нужно удалить отступ справа у каждого третьего элемента.Для этого используем li: nth-child (3n) . Готово!

Отличное решение, особенно для адаптивной верстки.

Разное

Как часто можно делать клизму грудничку: рекомендации педиатров

Разное

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Разное

Как успокоить плачущего ребенка: 10 эффективных способов

Разное

Что нужно новорожденному на первое время: полный список необходимых вещей

Разное

Пеленки для новорожденных: виды, размеры и способы использования

Разное

n	2n+1	4n+1	4n+4	4n	5n-2	-n+3
0	1	1	4	–	–	3
1	3	5	8	4	3	2
2	5	9	1	8	8	1
3	7	1	1	1	1	–
4	9	17	20	16	18	–
5	11	21	24	20	23	–

1.1	1.2	1.3	1.4
2.1	2.2	2.3	2.4
3.1	3.2	3.3	3.4
4.1	4.2	4.3	4.4
5.1	5.2	5.3	5.4

1.1	1.2	1.3	1.4
2.1	2.2	2.3	2.4
3.1	3.2	3.3	3.4
4.1	4.2	4.3	4.4
5.1	5.2	5.3	5.4

1.1	1.2	1.3	1.4
2.1	2.2	2.3	2.4
3.1	3.2	3.3	3.4
4.1	4.2	4.3	4.4
5.1	5.2	5.3	5.4

1.1	1.2	1.3	1.4	1.5	1.6	1.7	1.8
2.1	2.2	2.3	2.4	2.5	2.6	2.7	2.8
3.1	3.2	3.3	3.4	3.5	3.6	3.7	3.8
4.1	4.2	4.3	4.4	4.5	4.6	4.7	4.8
5.1	5.2	5.3	5.4	5.5	5.6	5.7	5.8

1.1	1.2	1.3	1.4
2.1	2.2	2.3	2.4
3.1	3.2	3.3	3.4
4.1	4.2	4.3	4.4
5.1	5.2	5.3	5.4

n	2n+1	4n+1	4n+4	4n	5n-2	-n+3
0	1	1	4	–	–	3
1	3	5	8	4	3	2
2	5	9	1	8	8	1
3	7	1	1	1	1	–
4	9	17	20	16	18	–
5	11	21	24	20	23	–

1.1	1.2	1.3	1.4
2.1	2.2	2.3	2.4
3.1	3.2	3.3	3.4
4.1	4.2	4.3	4.4
5.1	5.2	5.3	5.4

1.1	1.2	1.3	1.4
2.1	2.2	2.3	2.4
3.1	3.2	3.3	3.4
4.1	4.2	4.3	4.4
5.1	5.2	5.3	5.4

1.1	1.2	1.3	1.4
2.1	2.2	2.3	2.4
3.1	3.2	3.3	3.4
4.1	4.2	4.3	4.4
5.1	5.2	5.3	5.4

1.1	1.2	1.3	1.4	1.5	1.6	1.7	1.8
2.1	2.2	2.3	2.4	2.5	2.6	2.7	2.8
3.1	3.2	3.3	3.4	3.5	3.6	3.7	3.8
4.1	4.2	4.3	4.4	4.5	4.6	4.7	4.8
5.1	5.2	5.3	5.4	5.5	5.6	5.7	5.8

1.1	1.2	1.3	1.4
2.1	2.2	2.3	2.4
3.1	3.2	3.3	3.4
4.1	4.2	4.3	4.4
5.1	5.2	5.3	5.4