Русский
Русский
English
Свойства CSS
Статистика
Реклама

Псевдокласс :nth-last-of-type

Браузер
Internet Explorer
Chrome
Opera
Safari
Firefox
Версия
6.0
7.0
8.0
9.0
2.0
3.0
4.0
5.0
9.2
9.6
10
2.0
3.1
4.0
5.0
2.0
3.0
3.6
4.0
Поддержка
Не поддерживается
Не поддерживается
Не поддерживается
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Не поддерживается
Полная поддержка
Полная поддержка
Не поддерживается
Полная поддержка
Полная поддержка
Полная поддержка
Не поддерживается
Не поддерживается
Полная поддержка
Полная поддержка
Краткая информация
CSS CSS3+
Значение по умолчанию Нет
Применяется Ко всем элементам
Ссылка на спецификацию открыть в новой вкладке
Описание
Псевдокласс :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 1 Последний элемент.
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 Все нечетные элементы.
Табл. 1. Результат для различных значений псевдокласса
Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>nth-last-of-type</title>
<style type="text/css">
TABLE {
width: 100%; /* Ширина таблицы */
border-collapse: collapse; /* Убираем двойные границы */
}
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 cellspacing="0">
  <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 используется для выделения цветом всех нечетных колонок, начиная с последней.
Первоисточник - htmlbook.ru Автор - Влад Мержевич
Комментариев (-)
Имя
Электронная почта

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

© 2006-2024, heroes-3.ru