Nth last child css: &colon;nth-last-child() — CSS&colon; Cascading Style Sheets - Блог сумасшедшего сисадмина

Содержание

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

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

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…

Чётные

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

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

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

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

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

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

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

Два через два

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

Два через три

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

Три через три

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

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

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

Диапазон

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

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

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

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

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

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

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

Дополнительную информацию по псевдоклассам 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. Результат для различных значений псевдокласса
Значение	Номера элементов	Описание
1	1	Последний элемент, является синонимом псевдокласса :last-child.
5	5	Пятый элемент с конца.
2n	2, 4, 6, 8, 10	Все чётные элементы, аналог значения even.
2n+1	1, 3, 5, 7, 9	Все нечётные элементы, аналог значения odd.
3n+2	2, 5, 8, 11, 14	—
-n+3	3, 2, 1	—
5n-2	3, 8, 13, 18, 23	—
even	2, 4, 6, 8, 10	Все чётные элементы.
odd	1, 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 Explorer	Chrome	Opera	Safari	Firefox
9	4	9.5	3.2	3.5

Android	Firefox Mobile	Opera Mobile	Safari Mobile
2.1	1	10	3.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

Последнее изменение: 000Z»> 27 сентября 2022 г. , участниками 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 не будет опубликован. Обязательные поля помечены *

Комментарий *

Имя *

Email *

Сайт

Первая строка

Второй ряд

Третья строка

Четвертый ряд

Пятый ряд

Nth last child css: :nth-last-child() — CSS: Cascading Style Sheets

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

Синтаксис

Ссылки

Примеры

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

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

Нечётные

Чётные

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

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

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

Два через два

Два через три

Три через три

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

Диапазон

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

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

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

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

Синтаксис ?

Обозначения

Значения

Пример

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

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

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

Браузеры

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

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

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

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

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

HTML

CSS

Результат

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

HTML

Список из четырех элементов (стилизованный):

Список из двух элементов (без оформления):

CSS

Result

css :nth-last-child — CodeProject Reference

Примеры

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

Применение

Синтаксис

Описание

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

См. также

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

Лицензия

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

нечетный

четный

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

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

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

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

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

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

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

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

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

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

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

Рубрики

Рубрики