Есть ли способ выбрать последний элемент списка с помощью CSS?
Скажем, у меня есть следующий список:
- item1
- item2
- item3
Есть ли селектор CSS, который позволит мне напрямую выбрать последний элемент списка? В этом случае пункт 3.
Ваше здоровье!
В этом случае, я боюсь, вы не добьетесь того, чтобы это делало то, что вы хотите. Вы могли бы сделать это с помощью javascript, если у вас есть контроль над этим и вы хотите пойти по этой дороге, но это темная, страшная дорога с драконами;)
Правильный ответ о поддержке браузером в 2013 году принадлежит OZZIE. Устаревший ответ принадлежит Гленну Славену.
Ответы 3
Не то, чтобы я в курсе. Традиционное решение - пометить первый и последний элементы с помощью class = "first" & class = "last", чтобы вы могли их идентифицировать.
CSS psudo-class Первый ребенок предоставит вам первый элемент, но не все браузеры его поддерживают. CSS3 будет иметь последний ребенок тоже (в настоящее время поддерживается Firefox, Safari, но не IE 6/7 / beta 8)
Пока он не будет поддерживаться должным образом, вам нужно будет добавить класс к «последним» элементам, как предлагается. Однако вам не нужно делать это вручную. Если вы можете получить удар javascript, взгляните на:
- селектор jQuery: last-child
- Следите за детьми своих стихий и потомством (отдельная статья Алекса Бишоффа), особый, более легкий метод
Любой из них позволит избежать «загрязнения» вашей разметки и будет вполне приемлемым, если ваш стиль является «приятным дополнением», а не «обязательной» особенностью дизайна.
Кажется, это все еще актуально, если вы ищете поддержку x-платформы.
+1 для справки по jQuery. Если вы не контролируете разметку, как это имеет место во многих упражнениях по созданию скинов для продуктов / шаблонов, это действительно единственный (и самый простой) способ добиться успеха с широкой совместимостью с x-браузерами.
Ответ на этот вопрос следует обновить! IE9 + Firefox (некоторое время назад) + Chrome, Safari - вся поддержка: last-of-type или last-child
Ранее я пробежался по селектору li: last-child; однако я не могу его использовать, так как он не работает в IE. В этом случае у меня нет контроля над HTML, поэтому я не могу пометить первый и последний дочерние элементы соответственно.