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

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

Вот несколько книг, которые помогут вам разобраться в верстке сайтов и CSS более подробно.

02019055_cover-pdf-kniga-nina-komolova-komputernaya-verstka-i-dizayn-samouchitel    css3 cover_OUT.indd    09450331_cover-pdf-kniga-devid-soyer-makfarland-bolshaya-kniga-css3-2