Последнее обновление на 29.01.2023
Псевдокласс для nth child CSS все кроме последнего элемента списка код html
<style> ul li:not(:last-child){ color: orange; } </style> <ul> <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>
Аналогично будет CSS код для выбора всех элементов, кроме первого вместо last-child используется функция first-child. А выбор только первого элемента или только последнего также только без not, то есть
ul li:first-child{ color: orange; }
CSS nth child каждый четвертый элемент пример кода
<style> ul li:nth-child(4n) { color: orange; } </style> <ul> <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>
- 1 элемент
- 2 элемент
- 3 элемент
- 4 элемент
- 5 элемент
- 6 элемент
- 7 элемент
- 8 элемент
Выбор первых двух элементов, затем два пропускаем и в таком порядке чередуем.
<style> li:nth-child(4n-3), li:nth-child(4n-2){ color: orange; } </style> <ul> <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>
- 1 элемент
- 2 элемент
- 3 элемент
- 4 элемент
- 5 элемент
- 6 элемент
- 7 элемент
- 8 элемент
Первые два элемента nth child можно выбрать так
ul li:nth-child(1), ul li:nth-child(2){ color: orange; }
Предпоследние два элемента nth child можно выбрать с помощью псевдокласса nth-last-child
ul li:nth-last-child(-n+2){ color: orange; }
Выбор последнего элемента
ul li:nth-last-child(1){ color: orange; }
Выбор всех нечетных элементов из списка even
ul li:nth-last-child(even){ color: orange; }
аналогично четных odd
ul li:nth-last-child(odd){ color: orange; }
Вспомогательная таблица значений nth child
№ п/п | Формула | Значение | Примечание |
1. | 1 | 1 | Выбор первой строки |
2. | 7 | 7 | Выбор 7 строки |
3. | 2n | 2, 4, 6, 8, 10, 12 | Четное, аналог odd |
4. | 2n–1 | 1, 3, 5, 7, 9, 11, 13 | Нечетное, аналог even |
5. | 3n+2 | 2, 5, 8, 11, 14, 17 | — |
6. | –n+3 | 3, 2, 1 | Выбор первых трех элементов |
Ваш комментарий будет первым