CSS nth child все кроме последнего

Обновлено 18.02.2022

Псевдокласс для 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>

  • 1 элемент
  • 2 элемент
  • 3 элемент
  • 4 элемент
  • 5 элемент
  • 6 элемент
  • 7 элемент
  • 8 элемент

Аналогично будет 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 Выбор первых трех элементов

Ваш комментарий будет первым

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

Ваш адрес email не будет опубликован.