Содержание

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

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

  • odd – выбираются дочерние элементы требуемого типа с нечетными порядковыми номерами, отсчитываемыми относительно конца своего родительского элемента. Например, если задано правило span:nth-last-child(odd) {блок объявлений}, то в документе будут выбраны все дочерние элементы «span», которые имеют нечетные порядковые номера (1, 3, 5 и т.д.) относительно конца своего родительского элемента.
  • even – выбираются дочерние элементы требуемого типа с четными порядковыми номерами, отсчитываемыми относительно конца своего родительского элемента.
    Например, если задано правило span:nth-last-child(even) {блок объявлений}, то в документе будут выбраны все дочерние элементы «span», которые имеют четные порядковые номера (2, 4, 6 и т.д.) относительно конца своего родительского элемента.
  • n – выбираются дочерние элементы требуемого типа с указанным порядковым номером n, отсчитываемым относительно конца своего родительского элемента, при чем нумерация должна начинаться с единицы. Например, если задано правило span:nth-last-child(3) {блок объявлений}, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковый номер 3 относительно конца своего родительского элемента.
  • an+b – выбираются дочерние элементы требуемого типа, порядковый номер которых относительно конца своего родителя вычисляется по формуле an+b, где a и b – целые числа, задаваемые в качестве значений, а n – счетчик, который автоматически принимает значения 0, 1, 2 и т. д. Например, если задано правило span:nth-last-child(3n+4) {блок объявлений}, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковые номера 4, 7, 10 и т.д. относительно конца своего родительского элемента.

Селектор псевдоклассов напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html-документа не указываются и отделяются от указанного в селекторе элемента двоеточием «:». При этом выбираются элементы необходимого типа, которые соответствуют требованиям указанного в селекторе псевдокласса.

Синтаксис

<селектор>:nth-last-child(<значение>) {блок объявлений}

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/selectors-4/#the-nth-last-child-pseudo

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/:nth-last-child

Примеры

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>
	
		/* Выбираем дочерние по отношению к своему родителю (в данном */ 
		/* случае к элементу «p») элементы «span» с нечетными */
		/* порядковыми номерами, отсчитываемыми с конца: 1, 3, 5 и т. д. */	
		span:nth-last-child(odd){
		color: red;			 
		}
		/* А здесь с четными порядковыми номерами, отсчитываемыми */
		/* с конца элемента: 2, 4, 6 и т.д. */
		span:nth-last-child(even){
		color: blue;			 
		}
		
	</style>
	
</head>
<body>
	<p>
		<!--  Не забываем, что «br» тоже является элементом  -->
		<span>1 дочерний элемент.</span> 
		<span>2 дочерний элемент.</span><br>	
		<span>4 дочерний элемент.</span>
		<span>5 дочерний элемент.</span><br>	
		<span>7 дочерний элемент. </span>
		<span>8 дочерний элемент.</span><br>	
		<span>10 дочерний элемент.</span>
	</p>
	
</body>
</html>

Пример №1

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №2</title>
	
	<style>
	
		/* Выбираем дочерние по отношению к своему родителю (в данном */ 
		/* случае к элементу «body») элементы «span» с порядковыми */
		/* номерами считая с конца 3*0+1=1, 3*1+1=4, 3*2+1=7 и т.
д., */ /* что соответствует номерам 10, 7, 4, 1 начиная с начала */ span:nth-last-child(3n+1){ color: red; } /* Стиль применяется к 3-му дочернему элементу «span» */ /* с конца, т.е. к 8-му с начала */ span:nth-last-child(3){ color: blue; } </style> </head> <body> <!-- Не забываем, что «br» тоже является элементом --> <span>1 дочерний элемент.</span> <span>2 дочерний элемент.</span><br> <span>4 дочерний элемент.</span> <span>5 дочерний элемент.</span><br> <span>7 дочерний элемент. </span> <span>8 дочерний элемент.</span><br> <span>10 дочерний элемент.</span> </body> </html>

Пример №2

Псевдоклассы 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 раз уже помогла

Комментарии: (0)

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

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

Синтаксис ?

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

Обозначения

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

Значения

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Все нечётные элементы.
Пример

<!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 используется для выделения цветом всех нечётных колонок, начиная с последней.

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

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

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

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

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

Браузеры: Настольные Мобильные    

?

Internet ExplorerChromeOperaSafariFirefox
949.53.23.5

AndroidFirefox MobileOpera MobileSafari Mobile
2.11103.2

Браузеры

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

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

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

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

:nth-last-child() — CSS: Каскадные таблицы стилей

Псевдокласс CSS :nth-last-child() сопоставляет элементы на основе их положения в группе братьев и сестер, считая с конца.

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

 :nth-last-child( [из ]?)
 

Значения ключевых слов

нечетный

Представляет элементы, чье числовое положение в ряду братьев и сестер является нечетным: 1, 3, 5 и т. д., считая с конца.

четный

Представляет элементы, чье числовое положение в ряду братьев и сестер четное: 2, 4, 6 и т. д., считая с конца.

Функциональное обозначение

Представляет элементы, чье числовое положение в ряду братьев и сестер соответствует шаблону An+B , для каждого положительного целого числа или нулевого значения n . Индекс первого элемента, считая с конца, равен 1 . Значения A и B должны быть равны с.

Примеры селекторов

tr:nth-last-child(нечетный) или tr:nth-last-child(2n+1)

Представляет нечетные строки таблицы HTML: 1, 3, 5 и т. д., считая с конца.

tr:n-последний-потомок(четный) или tr:n-последний-потомок(2n)

Представляет четные строки HTML-таблицы: 2, 4, 6 и т. д., считая с конца.

:n-последний-потомок(7)

Представляет седьмой элемент, считая с конца.

:n-последний-потомок(5n)

Представляет элементы 5, 10, 15 и т. д., считая с конца.

:n-последний-потомок(3n+4)

Представляет элементы 4, 7, 10, 13 и т. д., считая с конца.

:n-последний-потомок(-n+3)

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

p:n-последний-потомок(n) или p:n-последний-потомок(n+1)

Представляет каждый

элемент среди группы братьев и сестер. Это то же самое, что и простая р селектор. (Поскольку n начинается с нуля, а последний элемент начинается с единицы, n и n+1 будут выбирать одни и те же элементы.)

p:n-последний-потомок(1) или p:n-последний-потомок(0n+1)

Представляет каждый

, который является первым элементом среди группы братьев и сестер, считая с конца. Это то же самое, что и селектор :last-child .

Пример таблицы

HTML
 <таблица>
  
    
      Первая строка
    
    
      Вторая строка
    
    
      Третья строка
    
    
      Четвертая строка
    
    
      Пятая линия
    
  

 
CSS
 таблица {
  граница: 1px сплошной синий;
}
/* Выбирает последние три элемента */
tr: n-последний-потомок (-n + 3) {
  цвет фона: розовый;
}
/* Выбирает каждый элемент, начиная со второго до последнего */
tr: n-последний ребенок (n + 2) {
  цвет синий;
}
/* Выбираем только последний второй элемент */
tr: n-последний ребенок (2) {
  вес шрифта: 600;
}
 
Результат

Запрос количества

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

HTML
 
Список из четырех элементов (стилизованный):
<ол>
  • Один
  • Два
  • Три
  • Четыре
  • Список из двух элементов (без оформления):
    <ол>
  • Один
  • Два
  • CSS
     /* Если есть как минимум три элемента списка,
       стиль их всех */
    li: n-последний ребенок (n + 3),
    li:nth-last-child(3) ~ li {
      красный цвет;
    }
     
    Result
    Specification
    Unknown specification
    # nth-last-child-pseudo

    BCD tables only load in the browser

    with JavaScript enabled. Включите JavaScript для просмотра данных.
    • :n-й ребенок , :n-последний тип
    • Количество запросов для CSS

    Последнее изменение: , участниками MDN

    css :nth-last-child — CodeProject Reference

    Псевдокласс CSS :nth-last-child(an+b) соответствует элементу, который имеет a n+ b -1 братьев и сестер после него в дереве документа, для заданного положительного или нулевого значения на n и имеет родительский элемент.

    Примеры

    Примеры селекторов

    тр:n-последний-потомок(-n+4)
    Соответствует последним четырем строкам таблицы HTML.
    span:nth-last-child(even)
    Сопоставляет четные элементы в их родительском элементе, начиная с последнего элемента и работая в обратном порядке.

    Применение

    Этот CSS . ..

    CSS

    Код копирования

    стол {
      граница: 1px сплошной синий;
    }
    tr:nth-last-child(-n+3) { /* последние 3 брата и сестры */
      цвет фона: салатовый;
    } 

    … с этим HTML…

    HTML

    Копировать код

    <таблица>
      
        
          Первая строка
        
        
           Вторая строка
        
        
           Третья строка
        
        
           Четвертая строка
        
        
           Пятая линия
        
      
     

    … выглядит так:

    Синтаксис  

    CSS

    Код копирования

    :nth-last-child(  [ из  23)"># ]? ) { свойства стиля 

    где
    = An+B | даже | нечетный

    Описание  

    Псевдокласс CSS :nth-last-child(an+b) соответствует элементу, который имеет a n+ b -1 братьев и сестер после него в дереве документа, для заданного положительного или нулевого значения для n и имеет родительский элемент.

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

    См. :nth-child для более подробного описания синтаксиса его аргумента.

    Совместимость с браузером  

    • Настольный
    • Мобильный

    Особенность Хром Firefox (Геккон) Internet Explorer Опера Сафари
    Базовая опора 4,0 3,5 (1.9.1) 9,0 9,5 3,2

    Особенность Андроид Firefox Mobile (Геккон) Мобильный IE Опера Мобайл Сафари Мобильный
    Базовая опора 2. 1 1,0 (1.9.1) 9,0 10,0 3,2

    См. также  

    • :n-й ребенок

    Технические характеристики  

    Спецификация Статус Комментарий
    Селекторы уровня 4
    Определение «:nth-last-child» в этой спецификации.
    Рабочий проект Без изменений
    Селекторы уровня 3
    Определение ‘:nth-last-child’ в этой спецификации.
    Рекомендация Исходное определение

    Лицензия

    © Mozilla Contributors, 2016 г.
    Под лицензией Creative Commons Attribution-ShareAlike License версии 2.5 или более поздней.
    https://developer. mozilla.org/en-us/docs/web/css/:nth-last-child

    CSS Псевдокласс CSS Макет Ссылка Ссылка Интернет

    CSS: псевдокласс nth-last-child — Изучите CSS

    ❮ Пред. Следующий ❯

    Псевдокласс :nth-last-child() выбирает элементы на основе их индекса, начиная с последнего элемента и выше.

    :nth-last-child() может быть задан числом, ключевым словом или формулой.

    нечетный

    Выбирает элементы с нечетными порядковыми номерами (например, 1, 3, 5, 7 и т. д.).

    четный

    Выбирает элементы с четными порядковыми номерами (например, 2, 4, 6, 8 и т. д.).

    Выбирает элементы, числовая позиция которых соответствует шаблону An+B (для каждого положительного целого числа или нулевого значения n). Индекс первого элемента равен 1, а n в формуле начинается с 0. Значения A и B должны быть целыми числами.

    Селекторы уровня 4

    Селекторы уровня 3

     :nth-last-child() {
      css объявления;
    } 

    Пример селектора :nth-last-child():

     
    
      <голова>
        Название документа
        <стиль>
          р: последний ребенок {
            цвет фона: #1c87c9;
            цвет: #fff;
          }
        
      
      <тело>
         

    :пример селектора nth-last-child

    Lorem ipsum — это просто фиктивный текст. ..

    Lorem Ipsum — это просто фиктивный текст...

    Попробуй сам »

    Пример «нечетных» и «четных» ключевых слов:

     
    
      <голова>
        Название документа
        <стиль>
          p: n-последний ребенок (нечетный) {
            фон: #1c87c9;
            цвет: #еее;
          }
          p: n-последний ребенок (четный) {
            фон: #666;
            цвет: #еее;
          }
        
      
      <тело>
         

    :пример селектора nth-last-child

    Абзац 1

    Абзац 2

    Абзац 3

    Попробуй сам »

    Пример :nth-last-child() с тегом

    :
     
    
      <голова>
        <стиль>
          стол {
            граница: 1px сплошная #8EBF41;
            интервал между границами: 10 пикселей;
            семейство шрифтов: без засечек;
          }
          таблица тр {
            цвет фона: #cccccc;
          }
          /* Выбирает последние три элемента */
          tr:n-последний-потомок(-n+3) {
            цвет фона: #8EBF41;
          }
          таблица тр тд {
            отступ: 10 пикселей;
          }
          /* Выбирает каждый элемент, начиная со второго до последнего */
          tr: n-последний ребенок (n + 2) {
            цвет: #ffffff;
          }
          /* Выбираем только последний второй элемент */
          tr: n-последний ребенок (2) {
            вес шрифта: 900;
          }
        
      
      <тело>
         

    :пример селектора nth-last-child

    <таблица>

    Попробуй сам »

    Пример :nth-last-child() с тегом

  • :
     
    
      <голова>
        <стиль>
          /* Если есть хотя бы три элемента списка, стилизовать их все */
          li:n-последний-ребенок(n+3),
          li:nth-last-child(n+3) ~ li {
            цвет: #8EBF41;
          }
        
      
      <тело>
         

    :пример селектора nth-last-child

    <ол>
  • Первый элемент списка
  • Второй элемент списка
  • <ол>
  • Первый элемент списка
  • Второй элемент списка
  • Третий элемент списка
  • Четвертый элемент списка
  • Пятый пункт списка
  • Шесть пунктов списка
  • Попробуй сам »

    Практикуйте свои знания

    Псевдокласс :nth-last-child() выбирает элементы

    на основе их индекса, начиная с последнего элемента вверх.

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

  • Первая строка
    Второй ряд
    Третья строка
    Четвертый ряд
    Пятый ряд