Last child li: :last-child — CSS | MDN

:first-child и :last-child | WebReference

Псевдокласс :first-child позволяет задать стиль для первого дочернего элемента из группы братских элементов, то есть таких, у которых один родитель.

Для демонстрации воспользуемся следующим списком.

<ul>
  <li>Uno</li>
  <li>Dos</li>
  <li>Tres</li>
</ul>

Все элементы <li> здесь равны между собой и имеют общего родителя <ul>. Таким образом, :first-child выберет первый пункт списка с текстом «Uno».

Селектор :first-child выбирает все первые элементы в каждой группе веб-страницы, что обычно не требуется. Для сокращения охвата к :first-child нужно добавить селектор элемента — p:first-child. Эту запись следует читать справа налево — сперва выбирается первый элемент, затем проверяется что это элемент <p>. Если первым элементом будет <p>, то к нему применяются стилевые правила; если первым оказывается другой элемент (не <p>), то стиль к нему не применяется.

Сложности с пониманием работы :first-child обычно возникают при чередовании разных элементов, как показано ниже.

<section>
  <p>Один</p>
  <div>Uno</div>
  <p>Два</p>
  <div>Dos</div>
  <p>Три</p>
  <div>Tres</div>
</section>

Следующий стиль сделает текст первого элемента внутри <section> зелёным («Один»). При этом мы не указываем какой это элемент, так что простая перестановка строк в HTML будет делать любую первую строку зелёной.

section > :first-child { color: green; }

Добавление div к селектору не даёт никакого результата — ни одна из строк не станет зелёной. Здесь берётся первый элемент и сравнивается, является ли он <div>. Поскольку первым элементом внутри <section> у нас идёт <p>, то стиль применяться не будет.

section > div:first-child { color: green; }

Заменив div на p получим первую строку зелёной, поскольку первым элементом у нас идёт именно <p>.

section > p:first-child { color: green; }

Аналогично :first-child работает и :last-child, только он определяет последний элемент в группе. К примеру, следующий стиль сделает зелёной строку с текстом «Tres», поскольку элемент <div> идёт последним.

section > div:last-child { color: green; }

Псевдоклассы :first-child и :last-child обычно применяются в списках и таблицах, где последовательно идут одни и те же элементы. В примере 1 между пунктами горизонтального списка добавляется вертикальная линия через свойство border-left. Чтобы убрать линию у первого пункта используем псевдокласс :first-child.

Пример 1. :first-child для списка

Рис. 1. Список с вертикальными линиями

Аналогичный результат достигается и с помощью :last-child, только вместо линии слева надо сделать её справа через свойство border-right.

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

Рис. 2. Границы в таблице

К каждой ячейке добавляется белая линия справа и сверху, а также серая линия слева и снизу. :first-child и :last-child применяются для отмены линий у первой и последней ячеек в строке (пример 2).

Пример 2. Использование :last-child

Обратите внимание на селектор tr:last-child td — он позволяет обратиться к ячейкам последней строки в таблице и убрать у них линию снизу.

См. также

• Псевдокласс :first-child
• Псевдокласс :first-of-type
• Псевдокласс :last-child
• Псевдоклассы в CSS

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 12.03.2020

Редакторы: Влад Мержевич

:root
Ctrl+←

:first-of-type и :last-of-type
Ctrl+→

Псевдоклассы группы child — CSS — Дока

1. Кратко
2. Пример
3. Как пишется
4. Подсказки

Кратко

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

Пример

Раскрасим в разные цвета фон у пунктов списка. Обратите внимание, что у всех пунктов списка одинаковые классы, а значит, мы не сможем обратиться к отдельным пунктам при помощи селектора по классу.

<ul>  <li>Изумрудно зелёный</li>  <li>Лаймовый</li>  <li>Лазурный</li>  <li>Лазурный</li>  <li>Лазурный</li>  <li>Розовый щербет</li>  <li>Умеренный оранжевый</li></ul>
          <ul>
  <li>Изумрудно зелёный</li>
  <li>Лаймовый</li>
  <li>Лазурный</li>
  <li>Лазурный</li>
  <li>Лазурный</li>
  <li>Розовый щербет</li>
  <li>Умеренный оранжевый</li>
</ul>
 
 

У всех пунктов списка будет синий фон:

.list-item {  background-color: #2E9AFF;}
          .list-item {
  background-color: #2E9AFF;
}

У первого пункта списка (первого дочернего элемента) будет тёмно-зелёный фон:

. list-item:first-child {  background-color: #286C2D;}
          .list-item:first-child {
  background-color: #286C2D;
}

У последнего пункта списка (последнего дочернего элемента) будет оранжевый фон:

.list-item:last-child {  background-color: #FF8630;}
          .list-item:last-child {
  background-color: #FF8630;
}

У второго пункта списка будет зелёный фон:

.list-item:nth-child(2) {  background-color: #41E847;}
          
 .list-item:nth-child(2) {
  background-color: #41E847;
}

У предпоследнего пункта списка будет розовый фон:

.list-item:nth-last-child(2) {  background-color: #F498AD;}
          .list-item:nth-last-child(2) {
  background-color: #F498AD;
}

Как пишется

Есть три суперпростых по своей логике работы псевдокласса из этого набора:

• :only-child — выбирает любой элемент, который является единственным дочерним элементом своего родителя. Можно имитировать аналогичное поведение следующими комбинациями: :first-child:last-child или :nth-child(1):nth-last-child(1), но зачем так сложно, если можно проще?
• :first-child — выбирает первый дочерний элемент в родителе.
• :last-child — выбирает последний дочерний элемент в родителе.

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

Звучит сложнее, чем работает. Начнём с простого, с ключевых слов:

• :nth-child(odd) — выбирает нечётные элементы внутри родителя, подходящие под левую часть селектора.
• :nth-child(even) — выбирает чётные элементы внутри родителя, подходящие под левую часть селектора.

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

Но всё становится гораздо интереснее, когда мы хотим выбрать, к примеру, каждый третий элемент внутри родителя. Используем для этого формулу :nth-child(3n). Вместо n будет подставляться 0, затем 1, 2 и так далее. В результате умножения в скобки будет подставляться 0, 3, 6, 9, и так до тех пор, пока не закончатся дочерние элементы внутри родителя.

Пойдём дальше и попробуем выбрать каждый шестой элемент, начиная с десятого. Тут нам к умножению на n нужно будет прибавить ещё 10, чтобы отсчёт начался не с 0, а с 10: nth-child(6n+10).

Псевдокласс :nth-last-child работает абсолютно аналогично, только счёт ведётся с конца.

Подсказки

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

💡 Не надо стесняться пользоваться калькулятором NTH. Часто не получается сразу в уме составить правильную формулу.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

:active

alt + ←

→

Псевдоклассы группы type

alt + →

Псевдоклассы nth-child и nth-last-child, Определенные номера, Нечётные или Чётные

Псевдоклассы nth-child и nth-last-child

• Нечётные
• Чётные
• Определенные номера
• Каждый третий элемент
• Один через три
• Два через два
• Два через три
• Три через три
• Первые десять
• Диапазон
• Все, кроме последнего
• Последний элемент
• Последние три элемента

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

Так и выражение, которое задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2 и т.д.

Значения odd и even, которые определяют четные и нечетные элементы.

:nth-last-child работает аналогично, только с конца списка элементов.

Нечётные

Все нечётные номера элементов: 1, 3, 5, 7…

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 30

Чётные

Чётные номера элементов: 2, 3, 6, 8. ..

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 30

Определенные номера

Пример группировки псевдоклассов и выбор элементов 2, 4, 6, 9.

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 30

Каждый третий элемент

Элементы 3, 6, 9, 12. ..

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 30

Один через три

Элементы 1, 5, 9, 13…

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 30

Два через два

Элементы 1, 2, 5, 6, 9, 10. ..

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 30

Два через три

Элементы 1, 2, 6, 7, 11, 12…

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 30

Три через три

Элементы 1, 2, 3, 7, 8, 9. ..

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 30

Первые десять

Первые десять элементов 1-10

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 30

Диапазон

C третьего по пятнадцатый:

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 30

Все, кроме последнего

Все элементы, кроме последнего:

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 30

Последний элемент

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 30

Последние три элемента

Выбор 3-х последних элементов

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 30

Дополнительную информацию по псевдоклассам nth-child и nth-last-child можно прочитать здесь

Помогла ли вам статья?

348 раз уже помогла

html — Различное поведение между «:last-child» и «:not(:last-child)»

Вопрос задан 2 года, 9 месяцев назад

Изменено 2 года, 8 месяцев назад

Просмотрено 305 раз

7

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

У меня есть следующий HTML-код:

Использование:

 nav :последний ребенок {
   преобразование текста: верхний регистр;
}
 

Результат:

• ТЕКСТ1
• ТЕКСТ2
• ТЕКСТ3

Использование:

 nav li:last-child {
   преобразование текста: верхний регистр;
}
 

Результат:

• Текст1
• Текст2
• ТЕКСТ3

При использовании:

 nav :not(:last-child) {
   преобразование текста: верхний регистр;
}
 

Результат:

• ТЕКСТ1
• ТЕКСТ2
• Текст3

Почему «:not(:last-child)» не нуждается в «li» для указания последнего дочернего элемента? Спасибо.

• html
• css
• css-selectors

nav :last-child включает ваш единственный элемент

. Так как есть только один, это :last-child . Таким образом, применяется text-transform: uppercase; ко всему его содержимому, в данном случае ко всем трем элементам
• . это также применяется к последнему
• , потому что это также a :last-child . Чтобы увидеть это более четко, вот пример с двумя элементами
  .

   навигация: последний ребенок {
     преобразование текста: верхний регистр;
  } 

   <навигация>
    <ул>
      
  Это не последний дочерний элемент, и родитель не последний дочерний элемент.
      
  Это не последний дочерний элемент, и родитель не последний дочерний элемент.
      
  Последний дочерний элемент li в этом разделе
    

  <ул>
• Родительский ul этих li является последним дочерним элементом
• Итак, все три ли.
• В верхнем регистре.

nav li:last-child относится только к li , поэтому только стилизует последние

.

 nav li:последний ребенок {
   преобразование текста: верхний регистр;
} 

 <навигация>
  <ул>
    
Применимо только к li
    
Стиль ul не применяется
    
Но это li :last-child
  
  <ул>
    
Применимо только к li
    
Стиль ul не применяется
    
Но это li :last-child
  
 

И, наконец, nav :not(:last-child) применяется к всему, что является :not последним потомком.

 навигация: не (: последний дочерний элемент) {
   преобразование текста: верхний регистр;
} 

 <навигация>
  <ул>
    
Этот ul не :last-child
    
Итак, все его содержимое.
    
будет в верхнем регистре
  
  <ул>
    
Этот ul является :last-child
    
Но эти первые два li не являются
    
Значит, они в верхнем регистре.
  
 

3

nav :not(:last-child) в основном это означает «все после nav, но не последний дочерний элемент». Пример ниже:

 nav :not(:last-child) {
   преобразование текста: верхний регистр;
} 

 <навигация>
  <ул>
    
Текст1
    
Текст2
    
Текст3
    <ул>
      
Текст4
      
Это: не
    
  
 

3

Это связано с тем, что селектор nav :last-child не выбирает последнего дочернего элемента какого-либо конкретного nav элемента , он выбирает любого потомка элемента nav , который также является последним дочерним элементом среди своих братьев и сестер (последний ребенок своего родителя).

Итак, учитывая элементы

css:

 навигация: последний ребенок {
   преобразование текста: верхний регистр;
}
 

выберет как ul , так и последний li , потому что они оба последние дети своих родителей.

С той же разметкой, но с CSS

 nav :not(:last-child) {
   преобразование текста: верхний регистр;
}
 

ul не будет выбран , потому что является последним потомком своего родителя. Однако первые 2 li элементов будут выбраны, потому что они , а не последние дочерние элементы своего родителя (среди своих прямых братьев и сестер).

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

CSS последний дочерний элемент | Как работает селектор последнего потомка в CSS с примерами?

Селектор:last-child отображает каждый элемент последнего дочернего элемента своего родителя. Проще говоря, CSS-псевдокласс: last-child определяет последний элемент в группе родственных элементов. Селектор:last-child позволяет вам напрямую выбрать последний элемент внутри определяющего его элемента. Это известно как «структурный псевдокласс» в спецификации CSS Selectors Level 3, что указывает на то, что он используется для разработки контента на основе его отношений между родительским и одноуровневым контентом.

Если вы хотите, чтобы последний абзац внутри контейнера был выбран и оформлен, независимо от того, является ли он последним дочерним элементом, вы можете использовать селектор: last-of-kind, который, как следует из названия, выберет последний элемент своего типа, независимо от того, является ли он последним дочерним элементом своего родителя.

Синтаксис и параметры

Синтаксис для селектора последнего дочернего элемента CSS может быть записан следующим образом:

 имя-элемента :последний-дочерний {
//CSS_style_properties
} 

Синтаксис использует следующие параметры:

имя-элемента: Этот параметр указывает тип элемента в пределах его родителя.

CSS_style_properties: этот параметр определяет стили CSS, которые можно применить к последнему дочернему элементу.

Например, рассмотрите следующий код:

 

 Это первый элемент 
 Это второй элемент 
 Это третий элемент 
 

Вы можете применить CSS для последнего дочернего элемента, как показано ниже:

 li:последний ребенок {
размер шрифта: 15px;
цвет синий;
} 

Это применит стиль CSS к последнему элементу в списке с размером шрифта 15px и синим цветом.

Как работает селектор последнего дочернего элемента в CSS?

Как и другие псевдоклассы, псевдокласс: last-child может быть сгруппирован с другими селекторами, такими как: hover, например, для выбора выбранного элемента со стилями наведения. Псевдоэлементы также могут быть связаны с ::before и ::after. Последний дочерний селектор часто называют структурным псевдоклассом, что означает, что его можно использовать на основе родительского и дочернего содержимого для стилизации содержимого.

Примеры использования селектора last-child в CSS

Теперь мы рассмотрим несколько примеров, описывающих использование селектора last-child в CSS.

Пример #1

Код:

 

<голова>
<мета-кодировка="utf-8">

<стиль>
р: последний ребенок {
оформление текста: подчеркивание;
размер шрифта: 20px;
красный цвет;
}


<тело>
 
 Пример селектора последнего дочернего элемента 
 



 EDUCBA (Corporate Bridge Consultancy Pvt Ltd) является ведущим мировым поставщиком профессионального образования, удовлетворяющего потребности более 500 000 участников в более чем 40 странах. 
 Наша уникальная пошаговая модель онлайн-обучения, а также более 2500 потрясающих курсов, подготовленных первоклассными профессионалами отрасли, помогают участникам успешно достигать своих целей. 
 В eduCBA мы гордимся тем, что делаем ориентированные на работу практические курсы доступными для всех, в любое время и в любом месте.  


 

Вывод:

В приведенном выше примере мы выбрали последний абзац в качестве последнего дочернего элемента, и тег p будет выбран с помощью селектора «p:last-child». Последний дочерний элемент выделяется красным цветом, размером шрифта 20 пикселей и подчеркнутым текстом, отображаемым на выходе.

Пример #2

Код:

 

<голова>
<мета-кодировка="utf-8">

<стиль>
уль ли {
цвет: зеленый;
}
ул ли: последний ребенок {
граница: 1px пунктирная синяя;
цвет: зеленый;
размер шрифта: 15px;
}


<тело>
 
 Пример селектора последнего дочернего элемента 
 


<ул>
 EDUCBA (Corporate Bridge Consultancy Pvt Ltd) 
 EDUCBA – ведущая международная компания, предоставляющая услуги профессионального обучения. 

Он удовлетворяет потребности более 500 000 участников в более чем 40 странах. 
<ул>
 Это модель онлайн-обучения, а также более 2500 потрясающих курсов. 
 Он предоставляет ориентированные на работу практические курсы, доступные для всех, в любое время и в любом месте 

 

<голова>
<мета-кодировка="utf-8">

<стиль>
ли: последний ребенок {
оформление текста: подчеркивание;
цвет: фуксия;
}
р: последний ребенок {
размер шрифта: 15px;
красный цвет;
}
диапазон:последний ребенок::до {
содержание: "(";
цвет: оранжево-красный;
}
диапазон: последний ребенок:: после {
содержание: ")";
цвет: оранжево-красный;
}


<тело>
<дел>
 
 Пример селектора последнего дочернего элемента 
 

EDUCBA (Корпорейт Бридж Консалтанси Пвт Лтд). ..


EDUCBA — ведущий мировой поставщик профессионального образования, удовлетворяющий потребности 500 000+ участников в более чем 40 странах.