Css последний элемент: Псевдокласс :last-child | htmlbook.ru

Leave a Comment / Css / By /

Псевдокласс :nth-last-child | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+9.6+3.1+3.6+2.1+2.0+

Краткая информация

Значение по умолчаниюНет
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/css3-selectors/#nth-last-child-pseudo

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

элемент:nth-last-child(odd | even | <число> | <выражение>) {. ..}

Значения

odd
Все нечетные номера элементов.
even
Все четные номера элементов.
число
Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке.
выражение
Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2…

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

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

Табл. 1. Результат для различных значений псевдокласса
ЗначениеНомера элементовОписание
11Последний элемент, является синонимом псевдокласса :last-child.
55Пятый элемент с конца.
2n2, 4, 6, 8, 10Все четные элементы, аналог значения even.
2n+11, 3, 5, 7, 9Все нечетные элементы, аналог значения odd.
3n+22, 5, 8, 11, 14—
-n+33, 2, 1—
5n-23, 8, 13, 18, 23—
even2, 4, 6, 8, 10Все четные элементы.
odd1, 3, 5, 7, 9Все нечетные элементы.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nth-last-child</title>
  <style>
   table { 
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные границы */
    border-spacing: 0; /* Расстояние между ячейками */
   }
   td {
    border: 1px solid #333; /* Параметры рамки */
    padding: 3px; /* Поля в ячейках */
    border-left: 3px double #333; /* Граница слева */ 
   }
   td:nth-last-child(2n+1) {
    background: #f0f0f0; /* Цвет фона */
   }
   td:nth-child(1) {
    border: 1px solid #333; /* Параметры рамки */
    background: #cfc; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <table>
   <tr> 
    <td>&nbsp;</td><td>2134</td><td>2135</td>
    <td>2136</td><td>2137</td><td>2138</td>
   </tr>
   <tr> 
    <td>Нефть</td><td>16</td><td>34</td>
    <td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
    <td>Золото</td><td>4</td><td>69</td>
    <td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
    <td>Дерево</td><td>7</td><td>73</td>
    <td>79</td><td>34</td><td>86</td>
   </tr>
   <tr>
    <td>Камни</td><td>23</td><td>34</td>
    <td>88</td><td>53</td><td>103</td>
   </tr>
  </table> 
 </body>
</html>

В данном примере псевдокласс :nth-last-child используется для выделения цветом всех нечётных колонок, начиная с последней (рис.  1).

Рис. 1. Применение псевдокласса :nth-last-child к колонкам таблицы

Псевдоклассы

CSS по теме

  • Псевдокласс :nth-last-child

Статьи по теме

Рецепты CSS

Псевдокласс :last-child | CSS | WebReference

  • Содержание
    • Синтаксис
    • Пример
    • Спецификация
    • Браузеры

Псевдокласс :last-child задаёт стиль последнего элемента в группе братских элементов (имеющих одного родителя).

В качестве примера рассмотрим следующий код HTML:

<article>
  <h2>Роль цитокинов при дорсалгии</h2>
  <p>Автор: Гордон Фримен, канд. физ.-мат. наук</p>
  <p>Содержание статьи</p>
  <address>Почта: [email protected]</address>
  <p>Опубликовано: <time datetime="2018-11-27">27 ноября 2018</time></p>
</article>

Псевдокласс :last-child без указания селектора выберет все последние элементы внутри <article> и установит для них красный цвет текста. Здесь последними идут <p> и <time> они и будут выбраны.

article :last-child { color: red; }

При добавлении селектора к :last-child сперва берётся последний элемент, затем смотрится какого он типа. Если элемент совпадает с указанным селектором, то он будет выбран. Таким образом, выбирается элемент, если он удовлетворяет двум условиям одновременно: это последний элемент и это элемент указанного типа. Здесь красным цветом будет выделен абзац, поскольку последним идёт именно <p>.

article p:last-child { color: red; }

Если вместо p использовать другой селектор, то ничего выбрано не будет, поскольку не выполняется условие «последний элемент это <h2>».

article h2:last-child { color: red; }

Для выбора последнего элемента определённого типа используйте псевдокласс :last-of-type.

Вместо :last-child допустимо использовать :nth-last-child(1).

Синтаксис 

Селектор:last-child { . .. }

Обозначения

Описание		Пример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.
inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>last-child</title> <style> .block { background: #7da7d9; /* Цвет фона */ color: #fff; /* Цвет текста */ } .block :first-child { padding: 10px; /* Поля вокруг текста */ } .block :last-child { background: #dda458 url(/example/image/line.png) repeat-x; /* Параметры фона */ height: 5px; /* Высота блока */ } </style> </head> <body> <div> <div> При истечении возможности понимания вышеизложенной информации вы имеете объективную возможность подать официальный запрос главному субординатору локальной виртуальной вселенной.
</div> <div></div> </div> </body> </html>

Результат примера показан на рис. 1. В данном примере псевдокласс :last-child применяется для определения стиля последнего элемента <div>, расположенного внутри контейнера с именем класса block. Это позволило создать цветную полосу внизу блока без включения новых классов.

Рис. 1. Результат использования псевдокласса :last-child

Спецификация

СпецификацияСтатус
Selectors Level 4Рабочий проект
Selectors Level 3Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

91219.53.21
2.11103.2

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

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

Псевдоклассы

См. также

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

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

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

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

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

css — CSS3 получить последний элемент

спросил

Изменено 7 лет, 5 месяцев назад

Просмотрено 73 тысячи раз

34

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

Как получить последний элемент (hr) из следующего кода:

 <дел>
    <дел>
        <промежуток>
<дел> <промежуток>
<дел>