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

Страница не найдена (ошибка 404)

PHP

HTML/CSS

JS/jQuery

htaccess

Bootstrap

Программы

Разное

Справочники

Страница не найдена (ошибка 404)

PHP

HTML/CSS

JS/jQuery

htaccess

Bootstrap

Программы

Разное

Справочники

:n-последний-ребенок | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

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

Предположим, у нас есть список с неизвестным количеством элементов, и мы хотим выделить предпоследний элемент (в данном конкретном примере «Четвертый элемент»):

 

  
Первый элемент
  
Второй элемент
  
Третий элемент
  
Четвертый пункт
  
Пятый пункт
 

Вместо добавления класса в элемент списка (например, .highlight ) мы можем использовать :nth-last-child :

 li {
  фон: сланцево-серый;
}
/* выбираем предпоследний элемент */
li: n-последний-ребенок (2) {
  фон: светло-серый;
} 

Как видите, :nth-last-child принимает аргумент: это может быть одно целое число, ключевые слова «чет» или «нечет» или формула. Если указано целое число, выбирается только один элемент, но ключевые слова или формула будут перебирать все дочерние элементы родительского элемента и выбирать соответствующие элементы — аналогично навигации по элементам в массиве в JavaScript. Ключевые слова «четные» и «нечетные» являются прямыми (2, 4, 6 и т. д. или 1, 3, 5 соответственно). Формула построена с использованием синтаксиса an+b , где:

• «a» — целое число
• «n» — буквальная буква «n»
• «+» является оператором и может быть как «+», так и «-»
• «b» является целым числом и требуется, если в формулу включен оператор

Важно отметить, что эта формула представляет собой уравнение и выполняет итерацию по каждому родственному элементу, определяя, какой из них будет выбран. Часть «n» формулы, если она включена, представляет собой набор возрастающих положительных целых чисел (точно так же, как итерация по массиву). В нашем примере выше мы выбрали каждый второй элемент по формуле 2n , что сработало, потому что каждый раз, когда элемент проверялся, «n» увеличивалось на единицу (2×0, 2×1, 2×2, 2×3 и т. д.). Если порядок элемента соответствует результату уравнения, он выбирается (2, 4, 6 и т. д.). Для более подробного объяснения задействованной математики, пожалуйста, прочитайте эту статью.

Чтобы проиллюстрировать это далее, вот несколько примеров допустимых селекторов :nth-last-of-type :

 Проверьте это Pen! 
 К счастью, вам не всегда нужно делать расчеты самостоятельно — есть несколько  :nth-last-child  доступных тестеров и генераторов: 
 
 
 Тестер CSS-Tricks 
 
 Тестер Леа Веру 
 
  
 Достопримечательности 
  
 
  :nth-last-child  перебирает элементы, начиная с нижней части исходного порядка. Единственная разница между ним и  :nth-child  заключается в том, что последний перебирает элементы , начиная с верхней части исходного порядка  . 
 
 Селектор  :nth-last-child  очень похож на 9.0005 :nth-last-of-type  но с одним  критическим отличием:  менее специфичен.  В нашем примере выше они дали бы тот же результат, потому что мы итерируем только  li  элементов, но если бы мы итерировали более сложную группу братьев и сестер,  :nth-last-child  попытался бы сопоставить все элементы того же уровня, а не только братья и сестры одного и того же типа элемента. Это раскрывает силу  :nth-last-child  — он может выбрать любой родственный элемент в аранжировке,  а не только элементы, указанные перед двоеточием  . 
 
 
 
 n-й ребенок 
 
 n-последний тип 
 
 энный тип 
 
 первый в своем роде 
 
 последний тип 
 
  
 Другие ресурсы 
  
 
 Документы Mozilla 
 
 Статья QuirksMode 
 
 Статья Sitepoint 
 
  
 Поддержка браузера 
  
 
 
 
 Chrome 
 
 Сафари 
 
 Фаерфокс 
 
 Опера 
 
 ИЭ 
 
 Андроид 
 
 iOS 
 
 
 
 
 
 Завод 
 
 3. 2+ 
 
 Работы 
 
 9.5+ 
 
 9+ 
 
 Работы 
 
 Работы 
 
 
 
 
  :nth-last-child  был представлен в модуле селекторов CSS 3, что означает, что старые версии браузеров не поддерживают его. Однако поддержка современных браузеров безупречна, а новые псевдоселекторы широко используются в производственных средах. Если вам требуется поддержка старых браузеров, либо полифил для IE, либо используйте эти селекторы некритичными способами, а-ля прогрессивное улучшение, что рекомендуется. 
  
 :nth-last-child() — CSS: Каскадные таблицы стилей конец. 
 
 
 Псевдокласс  nth-last-child  задается одним аргументом, который представляет шаблон для сопоставления элементов, считая с конца. 
 
 :nth-last-child(  [из  ]? )
 
 Значения ключевых слов 
  нечетный 
 Представляет элементы, чье числовое положение в ряду братьев и сестер является нечетным: 1, 3, 5 и т. д., считая с конца.
  даже 
 Представляет элементы, чье числовое положение в ряду братьев и сестер четное: 2, 4, 6 и т. д., считая с конца.
 Функциональное обозначение 
   
 Представляет элементы, чье числовое положение в ряду братьев и сестер соответствует шаблону  An+B  , для каждого положительного целого числа или нулевого значения  n  , где:
  A  — целочисленный размер шага,
  B  — целочисленное смещение,
  n  — все неотрицательные целые числа, начиная с 0.
 Может быть прочитан как  An+B  -й элемент списка. Индекс первого элемента, считая с конца, равен  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) 
 Представляет каждый 
  элемент среди группы братьев и сестер. Это то же самое, что и простой селектор  p . (Поскольку  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 {
  красный цвет;
}
 
 Результат 
9
 Спецификация
 SELECTORS Уровень 4 
  # NTH-LAST-CLILD-PSEUDO 
. Включите JavaScript для просмотра данных.
  :n-й дочерний элемент  ,  :n-й-последний тип 
 Количество запросов для CSS
  Последнее изменение: