Есть ли способ выбрать последний элемент списка с помощью CSS?

Скажем, у меня есть список:

item1
item2
item3

Есть ли селектор CSS, который позволит мне напрямую выбрать последний элемент списка? В этом случае пункт 3.

Ура!

Ответ 1

Не то, что я знаю. Традиционное решение - пометить первый и последний элементы с помощью class= "first" и class= "last", чтобы вы могли идентифицировать их.

CSS psudo-class first-child предоставит вам первый элемент, но не все браузеры его поддерживают. CSS3 будет last-child тоже (в настоящее время он поддерживается Firefox, Safari, но не IE 6/7/beta 8)

Ответ 2

Пока он не будет должным образом поддержан, вам нужно добавить класс к "последним" элементам, как это было предложено. Однако вам не обязательно делать это вручную. Если вы можете воспользоваться javascript-хитом, посмотрите также:

селектор jQuery: last-child
Сохранение ваших детей в соответствии с Offspring (в отдельной статье от Alex Bischoff), конкретный, более легкий метод

Либо избегайте "загрязнять" вашу разметку, и вполне приемлемы, если ваш стиль является "хорошим дополнением", а не "конструкцией".

Ответ 3

Ответ на этот вопрос должен быть обновлен! IE9 + Firefox (на некоторое время назад) + Chrome, поддержка Safari: last-of-type или last-child