Просмотров: 754

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

В предыдущих заметках, я писал о том, как работать с псевдоклассом nth-child:

CSS псевдокласс nth-child. Как выбрать все четные элементы списка, таблицы, блока, и.т.д.

//webgyry.info/nth-child-even

CSS псевдокласс nth-child. Как выбрать все нечетные элементы списка, таблицы, блока, и.т.д.

//webgyry.info/nth-child-odd

CSS. Как выбрать каждый первый, второй, третий и.т.д. элементы списка, таблицы, блока.

//webgyry.info/choose-first-second-etc

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

Чтобы стало более понятно, давайте рассмотрим пример.

Исходный код, над которым будем экспериментировать тот же самый:

<ul>
            <li>Элемент 1</li>
            <li>Элемент 2</li>
            <li>Элемент 3</li>
            <li>Элемент 4</li>
            <li>Элемент 5</li>
            <li>Элемент 6</li>
            <li>Элемент 7</li>
            <li>Элемент 8</li>
            <li>Элемент 9</li>
            <li>Элемент 10</li>
</ul>

Воспользуемся следующим стилем:

ul li:nth-last-child(3) {color:#F00;}

03-06-2013 20-21-45

Как видите, будет выделен 3-ий элемент, начиная отсчет с последнего. В остальном, те же значения, которые применяются для псевдокласса nth-child, можно использовать и для nth-last-child.