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

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	9.6+	3.1+	3.6+	2.1+	2.0+

Краткая информация

Значение по умолчанию	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/css3-selectors/#nth-last-child-pseudo

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

элемент:nth-last-child(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	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	Все нечетные элементы.

Пример 1

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

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

Пример 2

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Псевдокласс :nth-last-child</title>
<style type="text/css">
<!--
p:nth-last-child(even) {
color:green;
}
-->
</style>
</head>
<body>
<p>Этот текст ( чётный ) выделен</p>
<p>Этот текст ( не чётный ) не выделен</p>
<p>Этот текст ( чётный ) выделен</p>
<p>Этот текст ( не чётный ) не выделен</p>
<p>Этот текст ( чётный ) выделен</p>
<p>Этот текст ( не чётный ) не выделен</p>
<p>Этот текст ( чётный ) выделен</p>
<p>Этот текст ( не чётный ) не выделен</p>
</body>
</html>

Применение псевдокласса :nth-last-child по примеру 2

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Псевдоклассы | Добавил: evkuriy (08.07.2013)

Просмотров: 1041 | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]