Просмотров: 6 679

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

Если мы еще не знакомы, меня зовут Дмитрий Ченгаев.

Я автор сайта на котором вы сейчас находитесь.

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

Вот ссылка на страницу услуг:

Мои услуги