Просмотров: 7 841

Псевдокласс last-child. Как выбрать последний элемент в контейнере с помощью CSS.

В прошлой заметке мы научились выбирать первый элемент в родительском элементе с помощью селектора first-child. Дайте теперь научимся выбирать последний элемент в родительском блоке.

Это можно сделать с помощью селектора, который тоже является псевдоклассом и называется last-child.

Синтаксис здесь аналогичный:

элемент: first-child { свойства:значения }

Для примера, давайте возьмем тот же самый код, что и в предыдущей заметке:

<div id="main">
       <p>Элемент 1</p>
       <p>Элемент 1</p>
       <p>Элемент 3</p>
</div>

Псевдокласс last-child — выбирает последний, по очередности расположения в коде, дочерний элемент, который располагается в родительском элементе.

#main p:last-child { color:red; }

09-05-2013 13-39-50

Будет выделен «Элемент 3».

Кстати, если вам будет интересно, я занимаюсь веб-аналитикой сайтов. Если вы хотели бы сделать ваш сайт более эффективным и, чтобы он приносил больше денег, веб-аналитика может в этом помочь.

Обучающий курс для начинающих по основам работы с веб-аналитикой сайтов на системе Яндекс Метрика здесь.

Страница с описанием моих услуг по веб-аналитике: здесь.