:nth-last-of-type

Содержание

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

Синтаксис

Селектор:nth-last-of-type(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Последний элемент.
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-of-type</title>
  <style>
   table { 
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные границы */
    border-spacing: 0; /* Расстояние между ячейками */
   }
   td {
    border: 1px solid #333; /* Параметры рамки */
    padding: 3px; /* Поля в ячейках */
   }
   td:not(:first-of-type) {
    border-left: 3px double #333; /* Граница слева */ 
   }
   td:first-of-type {
    background: #eb9; /* Цвет фона */ 
   }
   td:nth-last-of-type(2n+1) {
    background: #f0f0f0; /* Цвет фона */
   }
  </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-of-type используется для выделения цветом всех нечётных колонок, начиная с последней (рис. 1).

Применение псевдокласса :nth-last-of-type к колонкам таблицы

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

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

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

Браузеры

Internet ExplorerChromeOperaSafariFirefox
949.53.23.5
AndroidFirefox MobileOpera MobileSafari Mobile
2.11103.2




Рекомендую хостинг: beget.ru

Сервер падал:5 дн. 1:38 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru