Псевдокласс 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; }

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